/*======================================================================
  Royal Home Decors — PRODUCTS + CONTACT COLOUR THEME
  ----------------------------------------------------------------------
  Loaded by products.html and contact.html only. Every rule is scoped to
  `.page-wrapper.pc-premium` ("pc" = products & contact), so it cannot
  reach the homepage, About, Services or the single-service pages.

  Scope is COLOUR ONLY. Backgrounds, text, buttons, icons, cards, form
  fields, borders and CTA panels move to the blue-and-white palette; no
  rule changes a width, height, padding, margin, font-size or position,
  so both pages render at exactly their current dimensions.

  Conventions carried over from the other page themes:
    * page banners keep the theme's flat neutral wash over the photo;
    * eyebrow labels use the same rounded navy badge as the homepage
      and the services pages.

  Layout of this file
    01  Palette
    02  Type colour
    03  Header
    04  Eyebrow badge
    05  Buttons
    06  Products — banner, filter pills, card captions
    07  Contact — banner, bands, form, info panel
    08  Footer
    09  Floating actions
======================================================================*/

/*----------------------------------------------------------------------
  01 — PALETTE
  Same ramp as the homepage, About and Services themes.
----------------------------------------------------------------------*/
.page-wrapper.pc-premium {
  --rhd-navy-deep: #0a2a5e;
  --rhd-navy: #123f80;
  --rhd-blue: #1b56ad;
  --rhd-blue-soft: #4b7fd0;

  --rhd-tint-05: #f7fafe;
  --rhd-tint-10: #eef4fc;
  --rhd-tint-20: #e2ecf9;
  --rhd-line: #d8e5f6;

  --rhd-ink: #10233f;
  --rhd-ink-soft: #4d6280;

  background: #ffffff;
}

/*----------------------------------------------------------------------
  02 — TYPE COLOUR
  The theme fakes weight with `text-shadow: 2px 0 <colour>` on h1/h2,
  doubling every glyph. Dropping it is a colour change in the same
  sense — nothing moves, the letterforms just stop smearing.
----------------------------------------------------------------------*/
.pc-premium h1,
.pc-premium .h1,
.pc-premium h2,
.pc-premium .h2 {
  text-shadow: none !important;
}

.pc-premium h2,
.pc-premium .h2,
.pc-premium h3 {
  color: var(--rhd-navy);
}

.pc-premium p {
  color: var(--rhd-ink-soft);
}

/*----------------------------------------------------------------------
  03 — HEADER
----------------------------------------------------------------------*/
.pc-premium .main-header .header-upper {
  background: #ffffff !important;
  border-bottom-color: var(--rhd-line) !important;
}

.pc-premium .main-menu .navbar-collapse > .navigation > li > a,
.pc-premium .main-menu .navbar-collapse li li a {
  color: var(--rhd-ink) !important;
}

.pc-premium .main-menu .navbar-collapse > .navigation > li > a:hover,
.pc-premium .main-menu .navbar-collapse li li a:hover {
  color: var(--rhd-navy) !important;
}

.pc-premium .main-menu .navbar-collapse li li {
  border-top-color: var(--rhd-line) !important;
}

@media only screen and (max-width: 991px) {
  .pc-premium .main-menu .navbar-collapse li {
    border-top-color: var(--rhd-line) !important;
  }

  .pc-premium .main-menu .navbar-collapse > ul > li:last-child {
    border-bottom-color: var(--rhd-line) !important;
  }

  .pc-premium .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    border-left-color: var(--rhd-line) !important;
  }
}

/*----------------------------------------------------------------------
  04 — EYEBROW BADGE
  Same rounded navy badge as the homepage and services pages.
----------------------------------------------------------------------*/
.pc-premium .sub-title,
.pc-premium .section-title .sub-title,
.pc-premium.page-wrapper .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 22px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(16, 47, 96, 0.07);
}

/* Small diamond ornament inside the badge. The theme draws a plain rule
   before this label on the product cards; the badge replaces it. */
.pc-premium .sub-title::before,
.pc-premium .projects-01 .carousel-caption .sub-title:before {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0;
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767px) {
  .pc-premium .sub-title,
  .pc-premium .section-title .sub-title {
    font-size: 11px;
    padding: 6px 16px;
    letter-spacing: 0.12em;
  }
}

/*----------------------------------------------------------------------
  05 — BUTTONS
----------------------------------------------------------------------*/
.pc-premium .theme-btn,
.pc-premium a.theme-btn {
  background: var(--rhd-navy) !important;
  color: #ffffff !important;
}

.pc-premium .theme-btn:hover,
.pc-premium a.theme-btn:hover {
  background: var(--rhd-blue) !important;
  color: #ffffff !important;
}

/* The circle-and-arrow "Read More" link on the product cards. */
.pc-premium .hero-btn,
.pc-premium .carousel-caption .hero-btn,
.pc-premium .carousel-caption .btn-icon .fa {
  color: var(--rhd-navy) !important;
}

.pc-premium .btn-icon .circle {
  border-color: var(--rhd-navy) !important;
}

.pc-premium .btn-icon .dot,
.pc-premium .btn-icon .line {
  background: var(--rhd-navy) !important;
}

.pc-premium a.hero-btn:hover,
.pc-premium a.hero-btn:hover .btn-icon .fa {
  color: var(--rhd-blue) !important;
}

.pc-premium a.hero-btn:hover .btn-icon .circle {
  border-color: var(--rhd-blue) !important;
}

.pc-premium a.hero-btn:hover .btn-icon .dot,
.pc-premium a.hero-btn:hover .btn-icon .line {
  background: var(--rhd-blue) !important;
}

/*----------------------------------------------------------------------
  06 — PRODUCTS
----------------------------------------------------------------------*/
.pc-premium .banner-content h1,
.pc-premium .banner-content .breadcrumb li,
.pc-premium .banner-content .breadcrumb a {
  color: #ffffff !important;
}

.pc-premium .banner-content .breadcrumb a:hover {
  color: var(--rhd-blue-soft) !important;
}

/* Category filters — outlined ghost tabs.
   The base theme paints every chip a solid navy pill and then turns the
   SELECTED one transparent, so the active filter read as the only
   unselected one. These are the other way round: idle tabs sit on a
   light blue fill behind a thin navy outline with rounded corners, and
   only the selected one goes solid navy.

   Layout: a centred flex row where every tab is only as wide as its own
   label plus even padding, so "ALL" stays short and "WOODEN FLOORING"
   stays long. A zero-height spacer li in the markup fills the line after
   the sixth filter, which puts the remaining four on a centred second
   row without pinning any tab to a fixed column width.
     idle   -> light blue fill, 1px navy outline, navy label
     hover  -> heading-navy fill, white label
     active -> heading-navy fill, white label */
.pc-premium .projects-01 .project-filter.tab-style-one {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px !important;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.pc-premium .projects-01 .project-filter li {
  display: block;
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
}

/* The row break: takes a whole flex line but no height, so the four
   remaining filters wrap onto a second centred row. */
.pc-premium .projects-01 .project-filter li.filter-row-break {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 0;
  margin: 0 !important;
  padding: 0;
  pointer-events: none;
}

.pc-premium .projects-01 ul.nav-pills.tab-style-one .nav-link,
.pc-premium .project-filter .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 52px;
  text-align: center;
  /* nowrap keeps each label on one line, so the tab is exactly as wide as
     its own words plus the padding either side. */
  white-space: nowrap !important;
  padding: 14px 28px !important;
  border: 1px solid rgba(18, 63, 128, 0.45) !important;
  border-radius: 26px !important;
  background-color: var(--rhd-tint-10) !important;
  color: var(--rhd-navy) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, box-shadow 0.25s ease;
}

.pc-premium .projects-01 ul.nav-pills.tab-style-one .nav-link:hover,
.pc-premium .projects-01 .project-filter .nav-link:hover {
  background-color: var(--rhd-navy) !important;
  border-color: var(--rhd-navy) !important;
  color: #ffffff !important;
}

.pc-premium .projects-01 .project-filter .nav-item.current .nav-link,
.pc-premium .project-filter .nav-item.current .nav-link,
.pc-premium .project-filter .nav-link.active {
  background-color: var(--rhd-navy) !important;
  border-color: var(--rhd-navy) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Narrower screens: the tabs just wrap wherever they fit, so the forced
   6 + 4 split is dropped and the padding tightens. */
@media only screen and (max-width: 991px) {
  .pc-premium .projects-01 .project-filter.tab-style-one {
    gap: 10px !important;
  }

  .pc-premium .projects-01 .project-filter li.filter-row-break {
    display: none;
  }

  .pc-premium .projects-01 ul.nav-pills.tab-style-one .nav-link,
  .pc-premium .project-filter .nav-link {
    padding: 12px 20px !important;
  }
}

@media only screen and (max-width: 575px) {
  .pc-premium .projects-01 .project-filter.tab-style-one {
    gap: 8px !important;
  }

  .pc-premium .projects-01 ul.nav-pills.tab-style-one .nav-link,
  .pc-premium .project-filter .nav-link {
    min-height: 42px;
    padding: 10px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em;
  }
}

/* Hover caption on each product tile: white card, navy title. */
.pc-premium .projects-01 .carousel-caption,
.pc-premium.page-wrapper .projects-01 .carousel-caption {
  background: #ffffff !important;
  color: var(--rhd-ink-soft) !important;
  box-shadow: 0 16px 40px rgba(16, 47, 96, 0.16);
}

.pc-premium .projects-01 .carousel-caption h5,
.pc-premium.page-wrapper .projects-01 .carousel-caption h5 {
  color: var(--rhd-navy) !important;
}

.pc-premium .projects-01 .carousel-caption p {
  color: var(--rhd-ink-soft) !important;
}

/*----------------------------------------------------------------------
  07 — CONTACT
  The page is built from four flat colour blocks: a two-tone banner, a
  near-black band behind the form, a grey band beside it, and a black
  "Get in touch" panel. All four move onto the blue ramp.
----------------------------------------------------------------------*/
.pc-premium .contact-banner {
  background-color: var(--rhd-navy-deep);
}

/* Solid white. The theme paints this heading with a hard-edged gradient -
   white across the left half, a dark colour across the right - clipped to
   the glyphs. Over the banner photo that left the second half of the word
   barely readable, so the split is dropped and the fill is set outright.
   -webkit-text-fill-color has to be reset too: it overrides `color` where
   it is supported, which is how the theme was hiding the text in the
   first place. */
.pc-premium .contact-title h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none;
}

.pc-premium .contact-title:after {
  background: var(--rhd-tint-20);
}

/* The two bands behind the form row. */
.pc-premium .contact-area:before {
  background: linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%);
}

.pc-premium .contact-area:after {
  background: var(--rhd-tint-20);
}

/* Form panel stays white; its fields get blue rules. */
.pc-premium .ct-form {
  background: #ffffff;
}

.pc-premium .contact-form input,
.pc-premium .contact-form select,
.pc-premium .contact-form textarea,
.pc-premium .contact-form .form-control {
  border-bottom-color: rgba(18, 63, 128, 0.35);
  color: var(--rhd-ink);
}

.pc-premium .contact-form input::placeholder,
.pc-premium .contact-form textarea::placeholder,
.pc-premium .contact-form .form-control::placeholder {
  color: var(--rhd-ink-soft);
}

/* The theme's global focus rule pulls the border back to a grey; this
   keeps focus on-brand and visible. */
.pc-premium .contact-form input:focus,
.pc-premium .contact-form textarea:focus,
.pc-premium .contact-form .form-control:focus {
  border-bottom-color: var(--rhd-blue) !important;
}

.pc-premium .contact-btn {
  background: var(--rhd-navy);
  border-color: var(--rhd-navy);
  color: #ffffff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.pc-premium .contact-btn:hover {
  background: var(--rhd-blue);
  border-color: var(--rhd-blue);
  color: #ffffff;
}

/* "Get in touch" panel. Its type carries inline white in the markup, so
   only the panel itself needs re-colouring. */
.pc-premium .contact-info {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(75, 127, 208, 0.30) 0%, transparent 62%),
    linear-gradient(150deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%);
}

.pc-premium .contact-gt a:hover .text,
.pc-premium .contact-gt a:hover i {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  08 — FOOTER
  Navy, matching every other page.
----------------------------------------------------------------------*/
.pc-premium .main-footer {
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  border-top-color: transparent !important;
}

.pc-premium .footer-top h2,
.pc-premium.page-wrapper .footer-top h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
}

.pc-premium .footer-top .white,
.pc-premium .footer-top h2 .white,
.pc-premium.page-wrapper .footer-top h2 .white {
  color: #ffffff !important;
  text-shadow: none !important;
}

.pc-premium .footer-bottom,
.pc-premium .footer-bottom .info p,
.pc-premium .copyright-area,
.pc-premium.page-wrapper .footer-bottom,
.pc-premium.page-wrapper .footer-bottom .info p,
.pc-premium.page-wrapper .copyright-area {
  color: rgba(255, 255, 255, 0.72) !important;
}

.pc-premium .footer-bottom a,
.pc-premium.page-wrapper .footer-bottom a {
  color: rgba(255, 255, 255, 0.86) !important;
}

.pc-premium .footer-bottom a:hover,
.pc-premium.page-wrapper .footer-bottom a:hover {
  color: #ffffff !important;
}

.pc-premium .copyright-area a,
.pc-premium .copyright-area a:hover,
.pc-premium.page-wrapper .copyright-area a {
  color: #ffffff !important;
}

.pc-premium .footer-bottom .h4-rotate,
.pc-premium.page-wrapper .footer-bottom .h4-rotate {
  color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: none !important;
}

.pc-premium .footer-bottom-text:has(.to-top) {
  border-right-color: rgba(255, 255, 255, 0.22) !important;
}

.pc-premium .to-top p,
.pc-premium.page-wrapper .to-top p {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.pc-premium .footer-social a {
  color: #ffffff !important;
}

.pc-premium .footer-social a:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  09 — FLOATING ACTIONS
----------------------------------------------------------------------*/
.pc-premium .floating-cta .call-btn {
  background: var(--rhd-navy);
  color: #ffffff;
}

.pc-premium .scroll-top {
  background: var(--rhd-navy);
  color: #ffffff;
}

.pc-premium .preloader {
  background: var(--rhd-tint-05) !important;
}


/*----------------------------------------------------------------------
  RESPONSIVE — RADIAL WASH SCALING
  Same reasoning as home-premium.css: the radial highlights are sized in
  fixed pixels, so on a narrow viewport they cover the whole section and
  read as a full gradient. Shrink them in proportion so tablet and mobile
  match the desktop look. Desktop rules are untouched.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .pc-premium .contact-info {
    background-image:
      radial-gradient(365px 184px at 15% 0%, rgba(75, 127, 208, 0.30) 0%, transparent 62%),
      linear-gradient(150deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%);
  }

  .pc-premium .main-footer {
    background-image:
      radial-gradient(490px 220px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}

@media only screen and (max-width: 767px) {
  .pc-premium .contact-info {
    background-image:
      radial-gradient(200px 100px at 15% 0%, rgba(75, 127, 208, 0.30) 0%, transparent 62%),
      linear-gradient(150deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%);
  }

  .pc-premium .main-footer {
    background-image:
      radial-gradient(265px 120px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}


/*----------------------------------------------------------------------
  BUTTON HOVER
  Every filled button inverts on hover: white panel, navy label.
----------------------------------------------------------------------*/
.pc-premium .theme-btn:hover,
.pc-premium a.theme-btn:hover,
.pc-premium .btn-white-bg:hover,
.pc-premium button.btn-white-bg:hover {
  background: #ffffff !important;
  border-color: var(--rhd-navy) !important;
  color: var(--rhd-navy) !important;
}