/* C&G additions to the original theme: brochure library, category tiles, offers,
   reviews, contact form and footer. Everything is scoped with "cg-". */

:root {
  --cg-red: #c1272d;
  --cg-red-dark: #9e1f24;
  --cg-ink: #161616;
  --cg-muted: #707070;
  --cg-paper: #f3efeb;
  --cg-line: #e5e1dc;
  --cg-dark: #111;
  --cg-dark-2: #1c1c1c;
  --cg-radius: 14px;
  --cg-font: var(--loobek-main-font, "Plus Jakarta Sans", sans-serif);
  --cg-font-bold: var(--loobek-main-font-bold, var(--cg-font));
}

.cg-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cg-wrap { box-sizing: border-box; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 30px; }
.cg-wrap *, .cg-wrap *::before, .cg-wrap *::after { box-sizing: border-box; }
@media (max-width: 767px) { .cg-wrap { padding: 0 16px; } }

.cg-library, .cg-cats, .cg-offers, .cg-reviews, .cg-contact, .cg-404, .cg-footer { font-family: var(--cg-font); color: var(--cg-ink); }
.cg-h2 { font-family: var(--cg-font-bold); font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; color: inherit; text-transform: none; }
.cg-h3 { font-family: var(--cg-font-bold); font-size: 22px; font-weight: 700; margin: 0 0 6px; color: inherit; text-transform: none; }
.cg-head { max-width: 680px; margin-bottom: 28px; }
.cg-head p, .cg-library__head p { margin: 0; color: var(--cg-muted); font-size: 16px; line-height: 1.6; }
.cg-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cg-center { text-align: center; margin: 32px 0 0; }
.cg-muted { color: var(--cg-muted); }
.cg-small { font-size: 13px; }

/* Buttons and links */
.cg-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cg-btns--center { justify-content: center; }
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent; font-family: var(--cg-font-bold); font-weight: 700; font-size: 15px;
  text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s, border-color .15s; line-height: 1;
}
.cg-btn--red { background: var(--cg-red); color: #fff !important; }
.cg-btn--red:hover { background: var(--cg-red-dark); }
.cg-btn--dark { background: var(--cg-ink); color: #fff !important; }
.cg-btn--dark:hover { background: #000; }
.cg-btn--line { border-color: var(--cg-ink); color: var(--cg-ink) !important; background: transparent; }
.cg-btn--line:hover { background: var(--cg-ink); color: #fff !important; }
.cg-btn--ghost { border-color: rgba(255,255,255,.7); color: #fff !important; background: transparent; }
.cg-btn--ghost:hover { background: #fff; color: var(--cg-ink) !important; }
.cg-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cg-font-bold); font-weight: 700; color: var(--cg-red) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Brochure library (reference 1) ---------- */
.cg-library { background: var(--cg-paper); padding: clamp(48px, 7vw, 80px) 0; }
.cg-library--home { margin: 0; }
.cg-library__head { margin-bottom: 22px; max-width: 640px; }
.cg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cg-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--cg-line); background: #fff; color: var(--cg-ink) !important; font-size: 14px; font-weight: 600;
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
.cg-pill small { color: var(--cg-muted); font-size: 12px; }
.cg-pill:hover { border-color: var(--cg-ink); }
.cg-pill.is-active { background: var(--cg-ink); border-color: var(--cg-ink); color: #fff !important; }
.cg-pill.is-active small { color: #bbb; }
.cg-library__status { margin: -12px 0 22px; color: var(--cg-muted); }
.cg-library__status a { color: var(--cg-red); font-weight: 700; }
.cg-bgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 18px; }
.cg-bcard { display: flex; flex-direction: column; text-decoration: none !important; color: var(--cg-ink) !important; }
.cg-bcard[hidden] { display: none; }
.cg-bcard__cover { display: block; aspect-ratio: 520 / 735; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06); margin-bottom: 12px; }
.cg-bcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cg-bcard:hover .cg-bcard__cover img { transform: scale(1.03); }
.cg-bcard__title { font-family: var(--cg-font-bold); font-weight: 700; font-size: 15px; line-height: 1.35; }
.cg-bcard:hover .cg-bcard__title { color: var(--cg-red); }
.cg-bcard__meta { color: var(--cg-muted); font-size: 13px; margin-top: 2px; }
.cg-help { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 48px; padding: 28px 32px; background: #fff; border-radius: var(--cg-radius); }
.cg-help p { margin: 0; color: var(--cg-muted); }
@media (max-width: 1100px) { .cg-bgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .cg-bgrid { grid-template-columns: repeat(3, 1fr); } .cg-help { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cg-bgrid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .cg-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 4px; scrollbar-width: none; }
  .cg-pills::-webkit-scrollbar { display: none; }
}

/* ---------- Category tiles (references 3 & 4) ---------- */
.cg-cats { padding: clamp(48px, 7vw, 80px) 0; }
.cg-cats__grid { display: grid; gap: 16px; grid-template-columns: 1.2fr 1fr 1fr 1fr; grid-template-rows: repeat(2, minmax(230px, 1fr)); }
.cg-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 230px; border-radius: var(--cg-radius); background: var(--cg-dark-2); color: #fff !important; text-decoration: none !important; }
.cg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.05) 100%); }
.cg-tile:hover img { transform: scale(1.04); }
.cg-tile__body { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 22px; }
.cg-tile__title { font-family: var(--cg-font-bold); font-weight: 700; font-size: 20px; line-height: 1.2; margin-bottom: 4px; }
.cg-tile__text { color: #ddd8d2; font-size: 14px; line-height: 1.45; margin-bottom: 14px; }
.cg-tile__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.cg-tile__link::before { content: ""; width: 20px; height: 2px; background: var(--cg-red); }
.cg-tile--lg { grid-row: span 2; }
.cg-tile--lg .cg-tile__title { font-size: 26px; }
.cg-tile--wa { background: var(--cg-red); }
.cg-tile--wa::after { display: none; }
.cg-tile--wa:hover { background: var(--cg-red-dark); }
.cg-tile--wa .cg-tile__text { color: #fbe1e2; }
.cg-tile--wa .cg-tile__link::before { background: #fff; }
.cg-tile__icon { margin-bottom: auto; padding-bottom: 18px; }
.cg-tile--wa .cg-tile__body { height: 100%; }
@media (max-width: 1024px) { .cg-cats__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .cg-tile--lg { grid-row: auto; grid-column: span 2; min-height: 300px; } }
@media (max-width: 560px) { .cg-cats__grid { grid-template-columns: 1fr; } .cg-tile--lg { grid-column: auto; } .cg-tile { min-height: 200px; } }

/* ---------- Offers: red feature panel + stacked brochure offers ---------- */
.cg-offers { background: var(--cg-dark); color: #fff; padding: clamp(56px, 7vw, 88px) 0; }
.cg-offers .cg-h2 { color: #fff; }
.cg-offers .cg-head p { color: #b5b0aa; }
.cg-offers .cg-eyebrow { color: #ff8a9b; }
.cg-offers__call { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid #3a3a3a; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; white-space: nowrap; transition: border-color .15s, background .15s; }
.cg-offers__call:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.cg-offers__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.cg-offer-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: clamp(28px, 4vw, 48px); border-radius: var(--cg-radius); background: linear-gradient(135deg, #d4213d 0%, #a3142b 100%); }
.cg-offer-hero > :not(.cg-offer-hero__mark) { position: relative; }
.cg-offer-hero__mark { position: absolute; right: -10px; top: -60px; font-family: var(--cg-font-bold); font-weight: 800; font-size: clamp(260px, 28vw, 380px); line-height: 1; color: rgba(255,255,255,.08); pointer-events: none; }
.cg-offer-hero .cg-badge { background: #fff; color: var(--cg-red); margin-bottom: auto; }
.cg-offer-hero__big { margin: 32px 0 10px; font-family: var(--cg-font-bold); font-weight: 800; font-size: clamp(44px, 5.4vw, 76px); line-height: .95; letter-spacing: -.03em; color: #fff; }
.cg-offer-hero__sub { margin: 0 0 12px; font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); color: #fff; }
.cg-offer-hero__text { margin: 0 0 26px; max-width: 460px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); }
.cg-offer-hero .cg-btns { margin: 0; }
.cg-btn--white { background: #fff; color: var(--cg-ink) !important; }
.cg-btn--white:hover { background: var(--cg-ink); color: #fff !important; }
.cg-btn .icon { vertical-align: -3px; }
.cg-offers__list { display: grid; grid-template-rows: repeat(2, 1fr); gap: 20px; }
.cg-offer { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; overflow: hidden; border-radius: var(--cg-radius); background: var(--cg-dark-2); border: 1px solid #2c2c2c; color: #fff !important; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.cg-offer:hover { border-color: #5a5a5a; transform: translateY(-2px); }
.cg-offer__media { display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 40%, #3a3a3a 0%, #232323 75%); }
.cg-offer__media img { display: block; width: 100%; max-width: 150px; height: auto; aspect-ratio: 707 / 1000; object-fit: cover; border-radius: 4px; box-shadow: 0 12px 26px rgba(0,0,0,.5); transition: transform .3s ease; }
.cg-offer:hover .cg-offer__media img { transform: translateY(-3px) rotate(-1deg); }
.cg-offer__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.4vw, 30px); }
.cg-offer__tag { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff8a9b; }
.cg-offer__title { font-family: var(--cg-font-bold); font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; margin-bottom: 8px; }
.cg-offer__text { color: #b5b0aa; font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.cg-offer__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff; }
.cg-offer:hover .cg-offer__link { color: #ff8a9b; }
.cg-badge { align-self: flex-start; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: var(--cg-red); color: #fff; font-size: 12px; font-weight: 700; }
.cg-offers__note { margin: 24px 0 0; color: #8f8a84; font-size: 13px; }
@media (max-width: 960px) {
  .cg-offers__grid { grid-template-columns: 1fr; }
  .cg-offer-hero { min-height: 0; }
  .cg-offers__list { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cg-offers .cg-head--row { align-items: flex-start; }
  .cg-offers__list { grid-template-columns: 1fr; }
  .cg-offer { grid-template-columns: 112px 1fr; }
  .cg-offer__media { padding: 14px; }
  .cg-offer-hero .cg-btns { flex-direction: column; align-items: stretch; }
}
/* On the Offers page the band is a rounded box so it doesn't run into the black footer; on the home page it's full width. */
.cg-offers--page { border-radius: var(--cg-radius); margin: 0 auto 60px; max-width: 1400px; }

/* ---------- Reviews (reference 5) ---------- */
.cg-reviews { padding: clamp(48px, 7vw, 80px) 0; }
.cg-gbadge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--cg-line); border-radius: 10px; background: #fff; }
.cg-gbadge > span { display: flex; flex-direction: column; line-height: 1.3; }
.cg-gbadge strong { font-size: 14px; }
.cg-gbadge small { font-size: 12px; color: var(--cg-muted); }
.cg-gbadge a { margin-left: 6px; color: var(--cg-red) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.cg-reviews__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.cg-review { display: flex; flex-direction: column; margin: 0; padding: 24px; border-radius: var(--cg-radius); background: #fff; border: 1px solid var(--cg-line); }
.cg-stars { color: var(--cg-red); letter-spacing: 2px; margin-bottom: 12px; font-size: 15px; }
.cg-review blockquote { margin: 0 0 18px; padding: 0; border: 0; font-size: 15px; line-height: 1.6; color: #3d3d3d; font-style: normal; quotes: none; }
.cg-review blockquote::before, .cg-review blockquote::after { content: none; }
.cg-review figcaption { margin-top: auto; }
.cg-review cite { display: block; font-style: normal; font-weight: 700; color: var(--cg-ink); }
.cg-review figcaption span { color: var(--cg-muted); font-size: 13px; }
.cg-review--lg { grid-row: span 2; background: var(--cg-red); border-color: var(--cg-red); }
.cg-review--lg .cg-stars, .cg-review--lg cite, .cg-review--lg blockquote { color: #fff; }
.cg-review--lg blockquote { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; font-weight: 600; }
.cg-review--lg figcaption span { color: #f6d3d6; }
.cg-reviews__masonry { columns: 3 300px; column-gap: 16px; }
.cg-reviews__masonry .cg-review { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 960px) { .cg-reviews__grid { grid-template-columns: 1fr 1fr; } .cg-review--lg { grid-column: span 2; grid-row: auto; } }
@media (max-width: 600px) { .cg-reviews__grid { grid-template-columns: 1fr; } .cg-review--lg { grid-column: auto; } }

/* ---------- Contact ---------- */
.cg-contact { padding: 10px 0 70px; }
.cg-contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.cg-contact__list { margin: 26px 0 0; display: grid; gap: 18px; }
.cg-contact__list dt { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 4px; }
.cg-contact__list dt .icon { color: var(--cg-red); }
.cg-contact__list dd { margin: 0 0 0 30px; color: #3d3d3d; line-height: 1.6; }
.cg-contact__list a { color: var(--cg-red); font-weight: 600; }
.cg-form-card { padding: clamp(22px, 4vw, 36px); border-radius: var(--cg-radius); background: var(--cg-paper); }
.cg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.cg-form__full { grid-column: 1 / -1; margin: 0; }
.cg-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.cg-form label small { display: inline !important; font-weight: 500; color: var(--cg-muted); }
.cg-form-card .cg-form input, .cg-form-card .cg-form select, .cg-form-card .cg-form textarea { width: 100% !important; max-width: none !important; height: auto; min-height: 48px; margin: 0; padding: 12px 14px !important; border: 1.5px solid var(--cg-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; font: inherit; font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--cg-ink); }
.cg-form textarea { min-height: 140px; resize: vertical; }
.cg-form-card .cg-form input:focus, .cg-form-card .cg-form select:focus, .cg-form-card .cg-form textarea:focus { outline: none; border-color: var(--cg-ink) !important; }
.cg-error { color: var(--cg-red); font-weight: 600; font-size: 13px; }
.cg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cg-alert { padding: 14px 16px; border-radius: 10px; margin: 14px 0 0; font-weight: 600; }
.cg-alert--ok { background: #e8f5ec; color: #1d6b37; }
.cg-alert--err { background: #fdecee; color: var(--cg-red-dark); }
@media (max-width: 900px) { .cg-contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cg-form { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.cg-404 { text-align: center; padding: 40px 16px 80px; }
.cg-404__code { font-size: clamp(64px, 12vw, 120px); font-weight: 800; color: var(--cg-red); line-height: 1; margin: 0 0 10px; }
.cg-404 p { max-width: 520px; margin: 10px auto 26px; color: var(--cg-muted); }

/* ---------- Footer (reference 6) ---------- */
.cg-footer { background: var(--cg-dark); color: #cfcac4; font-size: 15px; line-height: 1.6; }
.cg-footer a { color: inherit; text-decoration: none; }
.cg-footer a:hover { color: #fff; }
.cg-footer h2 { color: #fff; font-family: var(--cg-font-bold); font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin: 0 0 10px; text-transform: none; }
.cg-footer h3 { color: var(--cg-red); font-family: var(--cg-font-bold); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.cg-footer address { font-style: normal; margin: 0 0 10px; }
.cg-footer p { margin: 0 0 10px; }
.cg-footer__visit { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: clamp(40px, 6vw, 64px) 0; border-bottom: 1px solid #2c2c2c; }
.cg-footer__intro p { max-width: 420px; }
.cg-footer__intro .cg-btns { margin-top: 20px; }
.cg-hours { margin: 0; display: grid; gap: 6px; }
.cg-hours div { display: flex; justify-content: space-between; gap: 12px; max-width: 290px; }
.cg-hours dt { display: block !important; font-weight: 400; color: #cfcac4 !important; float: none; width: auto; margin: 0; }
.cg-hours dd { margin: 0; color: #fff; }
.cg-footer__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: clamp(36px, 5vw, 56px) 0; }
.cg-footer__main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cg-footer__main ul a { display: inline-flex; align-items: center; gap: 8px; }
.cg-footer__brand img { width: 170px; height: auto; margin-bottom: 16px; }
.cg-footer__brand p { max-width: 340px; }
.cg-social { display: flex !important; gap: 10px !important; margin-top: 16px !important; }
.cg-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid #2c2c2c; color: #fff; }
.cg-social a:hover { background: var(--cg-red); border-color: var(--cg-red); }
.cg-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0 28px; border-top: 1px solid #2c2c2c; font-size: 13px; color: #8f8a84; }
.cg-footer__bottom p { margin: 0; }
.cg-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.cg-madeby { color: #cfcac4; }
.cg-madeby a { color: #fff !important; font-weight: 700; border-bottom: 2px solid var(--cg-red); padding-bottom: 1px; }
.cg-madeby a:hover { color: var(--cg-red) !important; }
@media (max-width: 960px) {
  .cg-footer__visit { grid-template-columns: 1fr 1fr; }
  .cg-footer__intro { grid-column: span 2; }
  .cg-footer__main { grid-template-columns: 1fr 1fr; }
  .cg-footer__brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .cg-footer__visit, .cg-footer__main { grid-template-columns: 1fr; }
  .cg-footer__intro, .cg-footer__brand { grid-column: auto; }
  .cg-footer { padding-bottom: 70px; }
}

/* ---------- Fixes to the original theme ---------- */
/* Mobile logo collapsed to 0x0 on the old site (the SVG has no intrinsic size). */
@media (max-width: 991px) {
  .header-middle .logo-wrapper .logo { min-width: 140px; }
  .header-middle .logo-wrapper .logo img.mobile-logo { width: 140px !important; max-width: none !important; height: auto !important; }
}

/* Back-to-top arrow sat under the WhatsApp button on phones; lift it above. */
/* The WhatsApp button sits bottom-right: keep the back-to-top arrow above it
   and the footer's last line clear of both. */
#to-top { bottom: 84px !important; }
@media (min-width: 768px) {
  .cg-footer__bottom { padding-right: 90px; }
}
@media (max-width: 767px) {
  .cg-footer { padding-bottom: 150px; }
}

/* The theme recolours paragraphs; keep the 404 code red. */
.cg-404 .cg-404__code { color: var(--cg-red) !important; }

/* Shown instead of the enquiry form when online enquiries aren't available. */
.cg-unavailable { padding: 18px 20px; border-radius: 10px; background: #fff; border: 1px solid var(--cg-line); line-height: 1.6; }
.cg-unavailable a { color: var(--cg-red); font-weight: 700; }

/* The theme pads every list item except the first; reset it in the footer so rows line up. */
.cg-footer li { padding: 0 !important; margin: 0 !important; }
.cg-social { align-items: center; }
.cg-footer__main ul li { line-height: 22px; }
.cg-footer__main ul:not(.cg-social) a { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.cg-footer__main ul a .icon { flex: none; }

/* ---------- Home hero ---------- */
.cg-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 72vh, 720px); color: #fff; background: var(--cg-dark); font-family: var(--cg-font); }
.cg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.15) 100%); }
.cg-hero__inner { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 60px; }
.cg-hero__eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cg-hero__title { max-width: 720px; margin: 0 0 16px; font-family: var(--cg-font-bold); font-size: clamp(34px, 5vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: #fff; text-transform: none; }
.cg-hero__text { max-width: 560px; margin: 0 0 28px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #ebe6e1; }
.cg-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; color: #ebe6e1; }
.cg-hero__trust li { display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; margin: 0 !important; }
.cg-hero__trust .icon-star { color: #f5b301; }
@media (max-width: 767px) {
  .cg-hero { min-height: 560px; align-items: flex-end; }
  .cg-hero::after { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.25) 100%); }
  .cg-hero .cg-btns .cg-btn { flex: 1 1 auto; }
}

/* ---------- Showroom + 360° tour ---------- */
.cg-showroom { padding: clamp(48px, 7vw, 80px) 0; font-family: var(--cg-font); color: var(--cg-ink); }
.cg-showroom__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cg-eyebrow { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-red); }
.cg-showroom__text p { color: #3d3d3d; font-size: 16px; line-height: 1.7; margin: 0 0 26px; max-width: 520px; }
.cg-showroom__media { position: relative; display: block; overflow: hidden; border-radius: var(--cg-radius); aspect-ratio: 1600 / 1353; background: #e9e6e2; }
.cg-showroom__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cg-showroom__media:hover img { transform: scale(1.03); }
.cg-showroom__badge { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(17,17,17,.82); color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .cg-showroom__grid { grid-template-columns: 1fr; } }
/* The storefront image is artwork with its own white background and red frame: show it whole. */
.cg-showroom__media { background: transparent; border-radius: 0; overflow: visible; }
.cg-showroom__media img { object-fit: contain; }
.cg-showroom__media:hover img { transform: none; }
.cg-showroom__badge { left: 8%; bottom: 10%; }

/* Alternate section backgrounds on the home page (requested colour #F3EFEB). */
.cg-reviews { background: var(--cg-paper); }
.cg-showroom { background: #fff; }

/* Filter pills: label and count as one centred line; the count is a small badge. */
.cg-pill { line-height: 1; gap: 8px; }
.cg-pill small {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--cg-paper); color: var(--cg-ink); font-size: 11px; font-weight: 700; line-height: 1;
}
.cg-pill.is-active small { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Reputed brands (original layout: logos in a row, red links, no cards) ---------- */
.cg-brands { background: var(--cg-paper); padding: clamp(48px, 6vw, 72px) 0; }
.cg-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cg-brands__title { margin: 0 0 clamp(28px, 4vw, 44px); text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.3; color: #000; }
.cg-brands__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.cg-brand { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.cg-brand__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 90px; }
.cg-brand__logo img { max-width: 220px; max-height: 82px; width: auto; height: auto; object-fit: contain; transition: transform .2s; }
.cg-brand__logo:hover img { transform: scale(1.04); }
.cg-brand__link { font-family: var(--cg-font); font-size: 16px; font-weight: 600; color: var(--cg-red) !important; text-decoration: none !important; }
.cg-brand__link:hover { text-decoration: underline !important; }
@media (max-width: 767px) {
  .cg-brands__row { grid-template-columns: 1fr; gap: 36px; }
  .cg-brand__logo { height: 72px; }
  .cg-brand__logo img { max-width: 200px; max-height: 66px; }
}

/* Home page background rhythm: categories white, library beige, brands white, offers black, showroom beige, reviews white. */
.cg-library--home { background: var(--cg-paper); }
.cg-library--home + .cg-brands { background: #fff; }
.cg-showroom { background: var(--cg-paper); }
.cg-reviews { background: #fff; }
.cg-reviews--full { background: var(--cg-paper); }

/* Taller category tiles so the showroom photos aren't cropped to a thin strip. */
.cg-cats__grid { grid-template-rows: repeat(2, minmax(340px, 1fr)); }
.cg-tile { min-height: 340px; }
.cg-tile img { object-position: center 35%; }
@media (max-width: 1024px) {
  .cg-cats__grid { grid-template-rows: none; }
  .cg-tile { min-height: 300px; }
  .cg-tile--lg { min-height: 420px; }
}
@media (max-width: 560px) {
  .cg-tile { min-height: 280px; }
  .cg-tile--lg { min-height: 360px; }
}

/* ---------- Homepage polish ---------- */
/* Filter pills fit on one row on desktop. */
@media (min-width: 1420px) {
  .cg-pills { flex-wrap: nowrap; gap: 6px; }
  .cg-pill { padding: 0 11px; font-size: 13px; }
}

/* Large review card: a decorative quote mark and bigger text so it doesn't look empty. */
.cg-review--lg { position: relative; overflow: hidden; }
.cg-review__mark { position: absolute; right: 18px; top: -18px; font-family: Georgia, serif; font-size: 220px; line-height: 1; color: rgba(255,255,255,.14); pointer-events: none; }
@media (min-width: 961px) { .cg-review--lg blockquote { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.4; } }

/* Home library: only show full rows of covers under "All" (10 fits 5 or 2 across). */
@media (min-width: 821px) and (max-width: 1100px) {
  .cg-library--home .cg-bgrid.is-all > .cg-bcard:nth-child(n+9) { display: none; }
}
@media (min-width: 561px) and (max-width: 820px) {
  .cg-library--home .cg-bgrid.is-all > .cg-bcard:nth-child(n+10) { display: none; }
}

/* Showroom photo: don't let it take over the section on tablets. */
@media (max-width: 900px) {
  .cg-showroom__media { max-width: 540px; margin: 0 auto; width: 100%; }
}

/* Phones: category tiles two across (big tile full width) instead of one long column. */
@media (max-width: 560px) {
  .cg-cats__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cg-tile { min-height: 210px; }
  .cg-tile--lg { grid-column: span 2; min-height: 260px; }
  .cg-tile__body { padding: 14px; }
  .cg-tile__title { font-size: 16px; }
  .cg-tile--lg .cg-tile__title { font-size: 22px; }
  .cg-tile:not(.cg-tile--lg) .cg-tile__text { display: none; }
  .cg-tile__link { font-size: 13px; gap: 6px; }
  .cg-tile__link::before { width: 14px; }
  .cg-tile--wa .cg-tile__icon { padding-bottom: 8px; }
}

/* Comfortable tap target for text links; readable badge numbers. */
.cg-link { min-height: 44px; }
.cg-pill small { font-size: 12px; }

/* ---------- Final refinement pass ---------- */
/* Inner-page titles sit in the same centred column as the content below (the theme pinned them to the far left on wide screens). */
.breadcrumb-title-wrapper .breadcrumb-content.container { box-sizing: border-box; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; }
@media (max-width: 767px) { .breadcrumb-title-wrapper .breadcrumb-content.container { padding-left: 16px; padding-right: 16px; } }

/* Reviews use the site's text font; the theme's blockquote style was swapping in the wide display face. */
.cg-review blockquote { font-family: var(--cg-font); font-style: normal; letter-spacing: 0; }
.cg-review--lg blockquote { font-weight: 500; letter-spacing: -.01em; }

/* The banner accordion's radio inputs are marked hidden but the theme's form styles were showing them as stray circles. */
.elementskit-single-image-accordion--input[hidden] { display: none !important; }

/* Privacy policy and terms: keep the long legal text in the site's content column instead of running edge to edge. */
:is(.elementor-23201, .elementor-23792) > .e-con > .e-con-inner { box-sizing: border-box; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; }
:is(.elementor-23201, .elementor-23792) > .e-con > .e-con-inner > .elementor-widget-text-editor { max-width: 900px !important; }
@media (max-width: 767px) { :is(.elementor-23201, .elementor-23792) > .e-con > .e-con-inner { padding-left: 16px; padding-right: 16px; } }

/* home sections: equal margins left and right, matching the header edges */
@media (min-width: 1200px) { .cg-wrap { max-width: none; margin: 0; padding: 0 var(--cg-pad, 50px); } }

/* Offer cards: keep the soft light behind each cover the same size whatever the card size, so the
   section looks the same on the home page (bigger cards) as on Bathrooms 2GO and Special Offers. */
.cg-offer__media { background: radial-gradient(150px circle at 50% 45%, #333 0%, #232323 100%); }