/* ==========================================================================
   Dahab v24 storefront: pages.css (owner PAGES)
   /about, /contact, /return-policy and the branded error pages.
   These routes have no reference design (spec 07 G15/G25), so they are built
   only from reference pieces, with the reference values:
   - heading band      = .bundles-heading / .offers-heading (spec 04 §3.3, §4.2)
   - cards and fields  = the /checkout form card, summary card, .shop-field
                         and .checkout-note (spec 05 §8.4)
   - error pages       = main.admin-denied (spec 07 G16)
   Loaded last (after catalog.css and commerce.css); every rule is unlayered.
   ========================================================================== */

/* ---------- 1. Heading band (spec 04 §3.3) ----------
   The markup also carries .bundles-heading (catalog.css). .page-heading repeats
   the same values so these pages keep the look whatever catalog.css does. */
.page-heading{text-align:center;background:radial-gradient(at 50% 75%,#fbf2dc,#f6e8d1);padding:50px 5.2% 70px}
.page-heading .eyebrow{display:block;margin-bottom:12px;color:#966a79;font-size:14px}
.page-heading h1{margin:0;font-family:Damas,Arial,sans-serif;font-size:68px;font-weight:600;line-height:1.3}
.page-heading h1 em{color:#a27140;font-style:normal}
.page-heading>p{max-width:900px;margin:22px auto;color:#8c6b65;font-size:20px}
.page-heading--pink{background:#f9ddea}   /* = .offers-heading */
@media (max-width:800px){
  .page-heading{padding:28px 6% 45px}
  .page-heading .eyebrow{margin-bottom:8px;font-size:13px}
  .page-heading h1{font-size:52px}
  .page-heading>p{font-size:18px}
}

/* ---------- 2. Page body + two-column grid (spec 05 §8.4 .checkout-page / .checkout-grid) ---------- */
.page-body,.page-body *{box-sizing:border-box}
.page-body{max-width:1240px;margin:auto;padding:65px 32px 95px}
.page-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;gap:42px}
.page-grid--single{grid-template-columns:minmax(0,760px);justify-content:center}

/* white card = .checkout-form */
.page-card{background:#fff;border:1px solid #eadce4;border-radius:22px;padding:32px}
.page-card h2,.page-aside h2{display:flex;align-items:center;gap:12px;margin:0 0 28px;font-size:24px;font-weight:600;line-height:1.7}
.page-card h2 svg,.page-aside h2 svg{flex-shrink:0}
.page-card h2:not(:first-child){border-top:1px solid #eadce4;margin-top:32px;padding-top:25px}

/* pink side card = .checkout-summary */
.page-aside{background:#f5e8ef;border:1px solid #ecd7e3;border-radius:22px;padding:29px;position:sticky;top:30px}
.page-aside h2{margin-bottom:18px}
.page-aside>p{color:#755467;font-size:17px;line-height:1.9}
.page-aside .button{gap:14px;width:100%;min-height:50px;margin-top:22px;padding:12px 24px;border-radius:30px;font-size:17px}
.page-aside .button svg{width:16px;height:16px;flex-shrink:0}
.page-aside .button:focus-visible{box-shadow:0 0 0 3px #af5b7d80}

/* small print = .checkout-note */
.page-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;color:#896779;line-height:1.9;font-size:14px!important}
.page-note svg{flex-shrink:0;margin-top:6px}

@media (max-width:1150px){
  .page-grid{gap:24px}
  .page-card,.page-aside{padding:23px}
}
@media (max-width:900px){
  .page-body{padding:38px 22px 60px}
  .page-grid{grid-template-columns:1fr}
  .page-grid--single{grid-template-columns:1fr}
  .page-aside{position:static}
  .page-card{padding:25px}
}
@media (max-width:600px){
  .page-body{padding-inline:18px}
  .page-card,.page-aside{border-radius:16px;padding:21px 18px}
}

/* ---------- 3. /contact ---------- */
/* form fields = .shop-field (spec 05 §8.4); scoped so commerce.css cannot drift them */
.contact-form .shop-field{display:flex;flex-direction:column;gap:9px;min-width:0;margin-bottom:21px}
.contact-form .shop-field [data-slot=label]{font-size:16px;font-weight:500;line-height:1.6}
.contact-form .shop-field :is([data-slot=input],[data-slot=textarea]){display:block;width:100%;min-width:0;margin:0;color:inherit;background:#fff;
  border:1px solid #ddcbd5;border-radius:10px;outline:none;font-family:inherit;font-size:16px;font-weight:300;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.contact-form .shop-field [data-slot=input]{height:50px;padding:4px 12px;line-height:1.5;box-shadow:none}
.contact-form .shop-field [data-slot=textarea]{min-height:64px;padding:8px 12px;line-height:1.8;resize:vertical;box-shadow:0 1px 2px #0000000d}
.contact-form .shop-field :is([data-slot=input],[data-slot=textarea])::placeholder{color:#755a68;opacity:.75}
.contact-form .shop-field :is([data-slot=input],[data-slot=textarea]):focus-visible{border-color:#af5b7d}
.contact-form .shop-field [dir=ltr]{text-align:left}
/* submit = dark pill (.place-order geometry, .button-dark colours) */
.contact-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;margin-top:18px;padding:10px 24px;
  border-radius:30px;background:#571b3b;color:#fffaf8;font-size:17px;font-weight:500;line-height:1.35;white-space:normal;
  transition:background .2s,transform .25s}
.contact-submit:hover{background:#722b4e}
.contact-submit:focus-visible{box-shadow:0 0 0 3px #af5b7d80}
.contact-submit svg{width:18px;height:18px;flex-shrink:0}

/* contact links: .footer-social>a rhythm (20px Lucide icons, gap 9px, 16px) as divided rows = .summary-item */
.contact-links{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.contact-links>li+li{border-top:1px solid #e0c6d4}
.contact-links :is(a,.contact-line){display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 0;font-size:16px}
.contact-links svg{width:20px;height:20px;flex-shrink:0}
.contact-links b{flex:1 1 auto;font-weight:500}
/* the value may carry dir=ltr: the label takes the free space so the value sits at the row's end in both directions */
.contact-links .contact-value{flex:0 1 auto;min-width:0;color:#896779;font-size:15px;overflow-wrap:anywhere}
.contact-links a:hover b{color:#a34e75}
.contact-links a:hover .contact-value{text-underline-offset:5px;text-decoration:underline}
@media (max-width:600px){
  .contact-links :is(a,.contact-line){gap:10px;font-size:15px}
  .contact-links .contact-value{font-size:14px}
}

/* ---------- 4. /return-policy ---------- */
.policy-card h2{margin-bottom:10px}
.policy-card>p{color:#755467;font-size:17px;line-height:1.9}
@media (max-width:600px){.policy-card>p,.page-aside>p{font-size:16px}}

/* ---------- 5. /about (band + home about section + values + wholesale) ---------- */
.about-page .section.about-section{padding-top:94px}
.about-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:0;padding-bottom:90px}
.about-value{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;padding:40px;border-radius:18px;background:var(--value-color,#f7e1eb)}
.about-value .value-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ffffffa6;color:#591d3a}
.about-value .value-icon svg{width:24px;height:24px}
.about-value h2{margin:6px 0 0;font-size:34px;font-weight:600;line-height:1.5}
.about-value p{color:#755467;font-size:19px;line-height:1.95}
@media (max-width:1000px){.about-value{padding:26px}}
@media (max-width:800px){
  .about-page .section.about-section{padding-top:50px}
  .about-values{grid-template-columns:1fr;gap:18px;padding-top:0;padding-bottom:60px}
  .about-value{padding:25px 20px}
  .about-value h2{font-size:29px}
  .about-value p{font-size:17px}
}

/* ---------- 6. Error pages: main.admin-denied (spec 07 G16, verbatim + resolved values) ---------- */
.admin-denied{text-align:center;background:#fff8fb;flex-direction:column;justify-content:center;align-items:center;gap:22px;
  min-height:100vh;min-height:100svh;padding:32px;display:flex}
.admin-denied h1{font-size:32px;font-weight:600}
.admin-denied>div{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;display:flex}
.admin-denied p{max-width:560px}
.admin-denied .brand-logo{width:90px;height:90px;object-fit:contain}
.admin-denied .button{text-decoration:none}
.admin-denied .button:focus-visible{box-shadow:0 0 0 3px #af5b7d80}
@media (max-width:900px){.admin-denied .brand-logo{width:76px;height:76px}}