/* ==========================================================
   ART FOR MY ROOM
   Full-page British gallery design
   Scope: /shop-prints only, activated by JavaScript body class
   ========================================================== */

body.afmr-british-shop {
  --afmr-navy: #0c2340;
  --afmr-navy-deep: #07172b;
  --afmr-red: #b5162d;
  --afmr-red-dark: #8f1023;
  --afmr-cream: #f7f1e5;
  --afmr-paper: #fffdf8;
  --afmr-gold: #c7a45a;
  --afmr-gold-soft: #e4cf9d;
  --afmr-ink: #17202b;
  --afmr-muted: #66707c;
  --afmr-line: rgba(12, 35, 64, 0.15);
  --afmr-shadow: 0 22px 60px rgba(7, 23, 43, 0.12);
  --afmr-shadow-small: 0 12px 30px rgba(7, 23, 43, 0.10);

  margin: 0;
  color: var(--afmr-ink);
  background:
    radial-gradient(
      circle at 15% 2%,
      rgba(199, 164, 90, 0.14),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      #f4ecde 0,
      var(--afmr-cream) 36rem,
      #f8f4eb 100%
    );
}

/* British ribbon at the very top */

body.afmr-british-shop::before {
  content: "";
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background:
    linear-gradient(
      90deg,
      var(--afmr-navy) 0 38%,
      #ffffff 38% 43%,
      var(--afmr-red) 43% 57%,
      #ffffff 57% 62%,
      var(--afmr-navy) 62% 100%
    );
}

/* ----------------------------------------------------------
   Global typography
   ---------------------------------------------------------- */

body.afmr-british-shop h1,
body.afmr-british-shop h2,
body.afmr-british-shop h3 {
  color: var(--afmr-navy-deep);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  text-wrap: balance;
}

body.afmr-british-shop h1 {
  letter-spacing: -0.045em;
  line-height: 0.98;
}

body.afmr-british-shop h2 {
  letter-spacing: -0.035em;
  line-height: 1.05;
}

body.afmr-british-shop h3 {
  letter-spacing: -0.015em;
}

body.afmr-british-shop p,
body.afmr-british-shop li,
body.afmr-british-shop label,
body.afmr-british-shop input,
body.afmr-british-shop button {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.afmr-british-shop p {
  line-height: 1.72;
}

body.afmr-british-shop ::selection {
  color: white;
  background: var(--afmr-red);
}

/* ----------------------------------------------------------
   Header and navigation
   ---------------------------------------------------------- */

body.afmr-british-shop header {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(199, 164, 90, 0.38);
  background:
    linear-gradient(
      135deg,
      rgba(7, 23, 43, 0.99),
      rgba(12, 35, 64, 0.97)
    ) !important;
  box-shadow: 0 10px 30px rgba(7, 23, 43, 0.18);
}

body.afmr-british-shop header a,
body.afmr-british-shop header button {
  color: #fffdf7;
}

body.afmr-british-shop header nav a {
  position: relative;
  text-decoration: none;
}

body.afmr-british-shop header nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -8px;
  left: 50%;
  height: 2px;
  background: var(--afmr-gold);
  transition:
    right 180ms ease,
    left 180ms ease;
}

body.afmr-british-shop header nav a:hover::after,
body.afmr-british-shop header nav a:focus-visible::after {
  right: 0;
  left: 0;
}

/* ----------------------------------------------------------
   Main page structure
   ---------------------------------------------------------- */

body.afmr-british-shop main {
  overflow: hidden;
}

body.afmr-british-shop main > section {
  position: relative;
  isolation: isolate;
}

body.afmr-british-shop main > section:not(.afmr-british-hero) {
  margin-top: 34px;
  margin-bottom: 34px;
}

body.afmr-british-shop main > section:not(.afmr-british-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

/* Decorative section label */

body.afmr-british-shop main > section:not(.afmr-british-hero) h2::before {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 99px;
  background:
    linear-gradient(
      90deg,
      var(--afmr-red) 0 35%,
      var(--afmr-gold) 35% 100%
    );
}

/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-hero {
  min-height: min(780px, calc(100vh - 76px));
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(
      105deg,
      rgba(7, 23, 43, 0.98) 0%,
      rgba(12, 35, 64, 0.96) 47%,
      rgba(21, 48, 79, 0.91) 100%
    ) !important;
}

body.afmr-british-shop .afmr-british-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -9%;
  width: min(630px, 56vw);
  aspect-ratio: 1;
  border: 1px solid rgba(228, 207, 157, 0.32);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 28px,
      rgba(255, 255, 255, 0.026) 29px 30px
    );
}

body.afmr-british-shop .afmr-british-hero::after {
  content: "BRITISH ART • REAL ROOMS • FREE A3 PRINT";
  position: absolute;
  right: clamp(-120px, -7vw, -70px);
  bottom: 116px;
  padding: 12px 140px;
  color: var(--afmr-navy);
  background: var(--afmr-gold-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  transform: rotate(-7deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

body.afmr-british-shop .afmr-british-hero h1,
body.afmr-british-shop .afmr-british-hero h2,
body.afmr-british-shop .afmr-british-hero h3 {
  max-width: 900px;
  color: #fffdf8;
}

body.afmr-british-shop .afmr-british-hero h1 {
  max-width: 920px;
  font-size: clamp(3rem, 7.2vw, 7.2rem);
  text-shadow: 0 6px 35px rgba(0, 0, 0, 0.24);
}

body.afmr-british-shop .afmr-british-hero p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
}

body.afmr-british-shop .afmr-british-hero .fp-kicker,
body.afmr-british-shop .afmr-british-hero [class*="kicker"],
body.afmr-british-shop .afmr-british-hero [class*="eyebrow"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin-bottom: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(228, 207, 157, 0.48);
  border-radius: 999px;
  color: var(--afmr-gold-soft);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

body.afmr-british-shop main button,
body.afmr-british-shop main input[type="submit"],
body.afmr-british-shop main a[class*="button"],
body.afmr-british-shop main a[class*="btn"],
body.afmr-british-shop main [role="button"] {
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 850;
  letter-spacing: 0.025em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

body.afmr-british-shop main button:hover,
body.afmr-british-shop main input[type="submit"]:hover,
body.afmr-british-shop main a[class*="button"]:hover,
body.afmr-british-shop main a[class*="btn"]:hover,
body.afmr-british-shop main [role="button"]:hover {
  transform: translateY(-2px);
}

body.afmr-british-shop main button:focus-visible,
body.afmr-british-shop main a:focus-visible,
body.afmr-british-shop main input:focus-visible {
  outline: 3px solid rgba(199, 164, 90, 0.45);
  outline-offset: 3px;
}

/* Strong red primary actions */

body.afmr-british-shop main button[type="submit"],
body.afmr-british-shop main input[type="submit"],
body.afmr-british-shop main [class*="primary"],
body.afmr-british-shop main [class*="cta"] {
  color: #fff !important;
  border-color: var(--afmr-red) !important;
  background:
    linear-gradient(
      180deg,
      #c4213b,
      var(--afmr-red-dark)
    ) !important;
  box-shadow: 0 13px 25px rgba(181, 22, 45, 0.23);
}

/* ----------------------------------------------------------
   Free campaign badge and benefit pills
   ---------------------------------------------------------- */

body.afmr-british-shop [class*="badge"],
body.afmr-british-shop [class*="pill"],
body.afmr-british-shop [class*="chip"] {
  border: 1px solid rgba(199, 164, 90, 0.45);
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 0 5px 18px rgba(7, 23, 43, 0.06);
}

body.afmr-british-shop .afmr-british-hero [class*="badge"],
body.afmr-british-shop .afmr-british-hero [class*="pill"],
body.afmr-british-shop .afmr-british-hero [class*="chip"] {
  color: #fff;
  border-color: rgba(228, 207, 157, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------
   Gallery section
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-gallery {
  padding-top: clamp(70px, 9vw, 130px);
  padding-bottom: clamp(70px, 9vw, 130px);
  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 248, 0.95),
      rgba(247, 241, 229, 0.92)
    );
}

body.afmr-british-shop .afmr-british-gallery::after {
  content: "THE COLLECTION";
  position: absolute;
  z-index: -1;
  top: 40px;
  right: 3%;
  color: rgba(12, 35, 64, 0.035);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  white-space: nowrap;
}

/* Painting cards */

body.afmr-british-shop .afmr-british-gallery article,
body.afmr-british-shop .afmr-british-gallery [class*="card"],
body.afmr-british-shop .afmr-british-results article,
body.afmr-british-shop .afmr-british-results [class*="card"] {
  overflow: hidden;
  border: 1px solid rgba(12, 35, 64, 0.13);
  border-radius: 3px;
  background: var(--afmr-paper);
  box-shadow: var(--afmr-shadow-small);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

body.afmr-british-shop .afmr-british-gallery article:hover,
body.afmr-british-shop .afmr-british-gallery [class*="card"]:hover,
body.afmr-british-shop .afmr-british-results article:hover,
body.afmr-british-shop .afmr-british-results [class*="card"]:hover {
  border-color: rgba(199, 164, 90, 0.72);
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(7, 23, 43, 0.16);
}

body.afmr-british-shop .afmr-british-gallery article img,
body.afmr-british-shop .afmr-british-gallery [class*="card"] img,
body.afmr-british-shop .afmr-british-results article img,
body.afmr-british-shop .afmr-british-results [class*="card"] img {
  display: block;
  width: 100%;
  transition:
    transform 500ms cubic-bezier(.2, .7, .2, 1),
    filter 300ms ease;
}

body.afmr-british-shop .afmr-british-gallery article:hover img,
body.afmr-british-shop .afmr-british-gallery [class*="card"]:hover img,
body.afmr-british-shop .afmr-british-results article:hover img,
body.afmr-british-shop .afmr-british-results [class*="card"]:hover img {
  filter: saturate(1.06) contrast(1.025);
  transform: scale(1.025);
}

body.afmr-british-shop .afmr-british-gallery article h3,
body.afmr-british-shop .afmr-british-gallery [class*="card"] h3,
body.afmr-british-shop .afmr-british-results article h3,
body.afmr-british-shop .afmr-british-results [class*="card"] h3 {
  font-size: 1.3rem;
}

/* FREE A3 markings */

body.afmr-british-shop .afmr-british-gallery article *:where(
  strong,
  span,
  small
),
body.afmr-british-shop .afmr-british-results article *:where(
  strong,
  span,
  small
) {
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   Upload section
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-upload {
  padding-top: clamp(75px, 9vw, 135px);
  padding-bottom: clamp(75px, 9vw, 135px);
  color: #fff;
  background:
    linear-gradient(
      128deg,
      var(--afmr-navy-deep),
      var(--afmr-navy)
    ) !important;
}

body.afmr-british-shop .afmr-british-upload h2,
body.afmr-british-shop .afmr-british-upload h3 {
  color: #fffdf8;
}

body.afmr-british-shop .afmr-british-upload p,
body.afmr-british-shop .afmr-british-upload li,
body.afmr-british-shop .afmr-british-upload label {
  color: rgba(255, 255, 255, 0.82);
}

body.afmr-british-shop .afmr-british-upload h2::before {
  background:
    linear-gradient(
      90deg,
      var(--afmr-red) 0 44%,
      var(--afmr-gold) 44% 100%
    ) !important;
}

body.afmr-british-shop .afmr-british-upload form,
body.afmr-british-shop .afmr-british-upload [class*="upload"],
body.afmr-british-shop .afmr-british-upload [class*="drop"] {
  border-radius: 8px;
}

body.afmr-british-shop .afmr-british-upload form {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(228, 207, 157, 0.38);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.045)
    );
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(12px);
}

body.afmr-british-shop .afmr-british-upload input[type="email"],
body.afmr-british-shop .afmr-british-upload input[type="text"] {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 4px;
  color: var(--afmr-ink);
  background: #fffdf8;
}

body.afmr-british-shop .afmr-british-upload input::placeholder {
  color: #7b838b;
}

body.afmr-british-shop .afmr-british-upload input[type="file"] {
  max-width: 100%;
}

/* Drop area */

body.afmr-british-shop .afmr-british-upload [class*="drop"] {
  border: 2px dashed rgba(228, 207, 157, 0.55) !important;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035) 0 11px,
      rgba(255, 255, 255, 0.065) 11px 22px
    ) !important;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

body.afmr-british-shop .afmr-british-upload [class*="drop"]:hover {
  border-color: var(--afmr-gold) !important;
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   Results and wall preview
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-results {
  padding-top: clamp(70px, 9vw, 130px);
  padding-bottom: clamp(70px, 9vw, 130px);
  background:
    linear-gradient(
      180deg,
      #fffdf8,
      #f4ecde
    );
}

body.afmr-british-shop .afmr-british-results canvas,
body.afmr-british-shop .afmr-british-results [class*="preview"],
body.afmr-british-shop .afmr-british-results [class*="room"] {
  overflow: hidden;
  border: 9px solid var(--afmr-paper);
  border-radius: 3px;
  outline: 1px solid rgba(12, 35, 64, 0.15);
  box-shadow:
    0 0 0 5px var(--afmr-navy),
    0 28px 65px rgba(7, 23, 43, 0.18);
}

/* ----------------------------------------------------------
   Why it exists / process section
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-story {
  padding-top: clamp(70px, 9vw, 125px);
  padding-bottom: clamp(70px, 9vw, 125px);
  background:
    linear-gradient(
      120deg,
      rgba(199, 164, 90, 0.15),
      rgba(255, 253, 248, 0.98) 44%,
      rgba(181, 22, 45, 0.055)
    );
}

body.afmr-british-shop .afmr-british-story article,
body.afmr-british-shop .afmr-british-story [class*="step"],
body.afmr-british-shop .afmr-british-story [class*="card"] {
  position: relative;
  border-top: 4px solid var(--afmr-navy);
  border-right: 1px solid var(--afmr-line);
  border-bottom: 1px solid var(--afmr-line);
  border-left: 1px solid var(--afmr-line);
  border-radius: 3px;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: var(--afmr-shadow-small);
}

body.afmr-british-shop .afmr-british-story article:nth-child(even),
body.afmr-british-shop .afmr-british-story [class*="step"]:nth-child(even),
body.afmr-british-shop .afmr-british-story [class*="card"]:nth-child(even) {
  border-top-color: var(--afmr-red);
}

/* ----------------------------------------------------------
   FAQ
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-faq {
  padding-top: clamp(70px, 9vw, 125px);
  padding-bottom: clamp(70px, 9vw, 125px);
  background: var(--afmr-navy-deep);
}

body.afmr-british-shop .afmr-british-faq h2,
body.afmr-british-shop .afmr-british-faq h3 {
  color: #fffdf8;
}

body.afmr-british-shop .afmr-british-faq > div > p {
  color: rgba(255, 255, 255, 0.74);
}

body.afmr-british-shop .afmr-british-faq details,
body.afmr-british-shop .afmr-british-faq article,
body.afmr-british-shop .afmr-british-faq [class*="faq"] > div {
  border: 1px solid rgba(228, 207, 157, 0.28);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
}

body.afmr-british-shop .afmr-british-faq summary,
body.afmr-british-shop .afmr-british-faq h3,
body.afmr-british-shop .afmr-british-faq strong {
  color: var(--afmr-gold-soft);
}

body.afmr-british-shop .afmr-british-faq p {
  color: rgba(255, 255, 255, 0.78);
}

/* ----------------------------------------------------------
   Reviews
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-reviews {
  padding-top: clamp(70px, 9vw, 125px);
  padding-bottom: clamp(70px, 9vw, 125px);
  background:
    linear-gradient(
      180deg,
      #f7f1e5,
      #fffdf8
    );
}

body.afmr-british-shop .afmr-british-reviews blockquote,
body.afmr-british-shop .afmr-british-reviews article,
body.afmr-british-shop .afmr-british-reviews [class*="review"],
body.afmr-british-shop .afmr-british-reviews [class*="testimonial"] {
  position: relative;
  border: 1px solid rgba(12, 35, 64, 0.13);
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: var(--afmr-shadow-small);
}

body.afmr-british-shop .afmr-british-reviews blockquote::before,
body.afmr-british-shop .afmr-british-reviews article::before {
  content: "“";
  position: absolute;
  top: -20px;
  left: 20px;
  color: var(--afmr-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

body.afmr-british-shop footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.74);
  border-top: 4px solid var(--afmr-red);
  background:
    linear-gradient(
      135deg,
      var(--afmr-navy-deep),
      var(--afmr-navy)
    ) !important;
}

body.afmr-british-shop footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 100%;
  opacity: 0.18;
  background:
    linear-gradient(
      45deg,
      transparent 43%,
      #fff 43% 47%,
      transparent 47% 53%,
      #fff 53% 57%,
      transparent 57%
    );
  pointer-events: none;
}

body.afmr-british-shop footer h2,
body.afmr-british-shop footer h3,
body.afmr-british-shop footer strong {
  color: #fffdf8;
}

body.afmr-british-shop footer a {
  color: var(--afmr-gold-soft);
}

/* ----------------------------------------------------------
   Animation
   ---------------------------------------------------------- */

body.afmr-british-shop .afmr-british-reveal {
  animation: afmrBritishReveal 700ms ease both;
}

@keyframes afmrBritishReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.afmr-british-shop .afmr-attention-pulse {
  animation: afmrAttentionPulse 1.2s ease 2;
}

@keyframes afmrAttentionPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(181, 22, 45, 0);
  }

  40% {
    box-shadow: 0 0 0 7px rgba(181, 22, 45, 0.16);
  }
}

/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  body.afmr-british-shop::before {
    height: 5px;
  }

  body.afmr-british-shop .afmr-british-hero {
    min-height: auto;
    padding-top: 78px;
    padding-bottom: 84px;
  }

  body.afmr-british-shop .afmr-british-hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.7rem);
  }

  body.afmr-british-shop .afmr-british-hero::after {
    right: -175px;
    bottom: 48px;
    padding: 9px 190px;
    font-size: 8px;
  }

  body.afmr-british-shop main > section:not(.afmr-british-hero) {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  body.afmr-british-shop .afmr-british-results canvas,
  body.afmr-british-shop .afmr-british-results [class*="preview"],
  body.afmr-british-shop .afmr-british-results [class*="room"] {
    border-width: 5px;
    box-shadow:
      0 0 0 3px var(--afmr-navy),
      0 18px 36px rgba(7, 23, 43, 0.16);
  }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  body.afmr-british-shop *,
  body.afmr-british-shop *::before,
  body.afmr-british-shop *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}