/* ============================================================
   Qitaf — the hand-authored layer.

   style.css and responsive.css are machine-output: _build/restyle.py
   takes the vendor sheet, swaps the palette and the fonts, and rewrites
   its physical box properties to logical ones. Do not edit those two.
   Everything written by a person lives here, and it is loaded last.

   It carries five things:

     01  mobile-first foundations — the vendor sheet is desktop-first
         (max-width queries all the way down), so the base rules here
         set the phone layout and every media query below is min-width
     02  the pieces the template never had: wordmark, language switcher,
         occasion cards, the builder band, the journal grid, forms,
         tables, FAQ, error page
     03  section rhythm and the breadcrumb, which lost its background
         image when the Gazania art was deleted
     04  RTL corrections logical properties cannot reach — Bootstrap's
         LTR-only utility build, slick/owl arrows, decorative offsets
     05  reduced-motion and print

   Breakpoints, mobile-first:  480 · 576 · 768 · 992 · 1200
   ============================================================ */

/* ============================================================
   01 · FOUNDATIONS
   ============================================================ */
html { scroll-behavior: smooth; }

/* Bootstrap 4's Reboot in css-plugins.css sets `body { text-align: left }`
   outright. That file is vendor-minified and was never put through the
   logical-property rewrite, so every block on the page inherited a physical
   left edge and Arabic still read from the left. This is the one declaration
   that undoes it for the whole document. */
body.qitaf { text-align: start; }

body.qitaf {
  font-family: var(--body-font);
  color: var(--paragraph-color);
  background: #fff;
  font-size: 15px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.qitaf h1, body.qitaf h2, body.qitaf h3,
body.qitaf h4, body.qitaf h5, body.qitaf h6 {
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-weight: 500;
  line-height: 1.2;
}

body.qitaf img { max-width: 100%; height: auto; }
body.qitaf a { color: inherit; text-decoration: none; }
body.qitaf a:hover { color: var(--main-color-one); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* the vendor rhythm is built for 1920px; on a phone it is a lot of nothing */
.section-pad { padding-block: 56px; }
.section-more { margin-top: 34px; }
.section-title-area { margin-bottom: 30px; }
.section-title .title { font-size: 27px; line-height: 1.22; }
.section-title p { font-size: 15px; margin-top: 14px; }
.section-title-2 .icon { flex: 0 0 52px; }
.section-title-2 .icon img {
  width: 46px; height: 46px; padding: 8px;
  margin-inline-end: 14px; background-color: var(--main-color-one);
  border-radius: 0 12px 0 12px;
}

@media (min-width: 768px) {
  body.qitaf { font-size: 16px; }
  .section-pad { padding-block: 78px; }
  .section-title .title { font-size: 36px; }
  .section-title-2 .icon { flex: 0 0 68px; }
  .section-title-2 .icon img { width: 58px; height: 58px; padding: 10px; margin-inline-end: 18px; }
}
@media (min-width: 1200px) {
  .section-pad { padding-block: 104px; }
  .section-title .title { font-size: 44px; }
  .section-title-area { margin-bottom: 44px; }
}

/* buttons -------------------------------------------------------------- */
.boxed-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; min-height: 46px;
  background: var(--main-color-one); color: #fff;
  font-family: var(--body-font); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; border: 1px solid var(--main-color-one);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.boxed-btn.btn-rounded { border-radius: 30px 0 30px 0; }
/* `body.qitaf a { color: inherit }` outranks a bare .boxed-btn, so an anchor
   button inherited its parent's colour instead of taking white — on the
   terracotta pill that made the label vanish. These win it back. */
body.qitaf a.boxed-btn, body.qitaf button.boxed-btn { color: #fff; }
body.qitaf a.boxed-btn:hover { color: #fff; }
body.qitaf a.boxed-btn--ghost { color: var(--heading-color); }
body.qitaf a.boxed-btn--ghost:hover { color: #fff; }
.boxed-btn:hover { background: var(--main-color-dark); border-color: var(--main-color-dark); color: #fff; transform: translateY(-2px); }
.boxed-btn--ghost { background: transparent; color: var(--heading-color); border-color: var(--secondary-color-two); }
.boxed-btn--ghost:hover { background: var(--heading-color); border-color: var(--heading-color); color: #fff; }
.btn-wrapper { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   02 · THE PIECES THE TEMPLATE NEVER HAD
   ============================================================ */

/* wordmark — Qitaf set as type, no icon --------------------------------- */
.qitaf-mark { display: inline-flex; flex-direction: column; line-height: 1; }
.qitaf-mark__word {
  font-family: var(--heading-font);
  font-size: 27px; font-weight: 600; letter-spacing: .015em;
  color: var(--heading-color);
}
.qitaf-mark__sub {
  margin-top: 5px; font-family: var(--body-font);
  font-size: 9px; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; color: var(--main-color-one);
}
.qitaf-mark:hover .qitaf-mark__word { color: var(--main-color-one); }
.qitaf-mark--footer .qitaf-mark__word { color: #fff; }
.qitaf-mark--footer { margin-bottom: 18px; }
[dir="rtl"] .qitaf-mark__sub { letter-spacing: .12em; }
@media (min-width: 992px) { .qitaf-mark__word { font-size: 32px; } }

/* language switcher ----------------------------------------------------- */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 34px; padding: 0 10px;
  background: transparent; border: 1px solid var(--secondary-color-two);
  border-radius: 30px 0 30px 0; cursor: pointer;
  font-family: var(--body-font); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--heading-color); transition: .25s;
}
.lang-switch__btn:hover { background: var(--main-color-one); border-color: var(--main-color-one); color: #fff; }
.lang-switch__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  z-index: 60; min-width: 150px; margin: 0; padding: 6px 0;
  list-style: none; background: #fff; border: 1px solid var(--border-color);
  border-radius: 14px 0 14px 0; box-shadow: 0 18px 40px rgba(46, 35, 32, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .22s;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__menu button {
  display: block; width: 100%; padding: 9px 18px; border: 0;
  background: none; cursor: pointer; text-align: start;
  font-family: var(--body-font); font-size: 14px; color: var(--paragraph-color);
}
.lang-switch__menu button:hover { background: var(--secondary-color); color: var(--heading-color); }
.lang-switch__menu button[aria-current="true"] { color: var(--main-color-one); font-weight: 700; }

/* preloader ------------------------------------------------------------- */
.qitaf-loader { display: flex; gap: 8px; }
.qitaf-loader span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--main-color-one); animation: qitaf-bounce 1.1s infinite ease-in-out;
}
.qitaf-loader span:nth-child(2) { background: var(--secondary-color-three); animation-delay: .16s; }
.qitaf-loader span:nth-child(3) { background: var(--secondary-color-four); animation-delay: .32s; }
@keyframes qitaf-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .5 } 40% { transform: scale(1); opacity: 1 } }

/* hero ------------------------------------------------------------------ */
/* The vendor sheet clips the kicker to a background image
   (assets/img/slider/home-1/text-bg-1.jpg) with -webkit-text-fill-color:
   transparent. That art was Gazania's and is gone, so the text would be
   invisible; the fill is handed back here. */
.slide-title-1, .slide-title-1-bg {
  background-image: none !important;
  -webkit-text-fill-color: currentColor;
}
/* slick owns .slide-item — it sets display, float and width on it — so the
   layout grid goes on a wrapper inside, never on the slide itself */
/* the vendor sizes the hero with min-height:calc(100vh - 140px); a viewport
   unit is the wrong tool on a phone in landscape and it makes the section
   taller than its content everywhere. Height comes from the content here. */
.slider-area { padding-bottom: 34px; }
.slide-item { min-height: 0; }
.slide-inner { position: relative; }
/* the vendor pins the hero image absolutely at 58% width and 100% height,
   which on a phone puts it underneath the headline. It only becomes a
   two-column layout at 992 and up, where the grid handles the placement. */
.slide-image { position: static; width: auto; height: auto; inset: auto; }
/* the hero sits outside a .container, so it needs the gutter itself */
.slide-inner { padding-inline: 16px; }
/* the vendor hides slide content until WOW reveals it; WOW is gone, so the
   only thing keeping it hidden would be an animation that never runs */
.slide-content > * { opacity: 1; visibility: visible; animation-name: none; }
.slide-content { padding: 36px 0 24px; width: auto; }
.slide-title-1 {
  font-family: var(--heading-font); font-size: 34px; font-weight: 600;
  letter-spacing: .08em; color: var(--main-color-one); margin: 0 0 4px;
}
.slide-title-2 { font-size: 30px; margin: 0 0 16px; }
.slide-content p { max-width: 52ch; margin-bottom: 24px; }
.slide-image img {
  width: 100%; border-radius: 90px 0 90px 0; object-fit: cover;
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) {
  .slide-title-1 { font-size: 52px; }
  .slide-title-2 { font-size: 44px; }
}
@media (min-width: 992px) {
  .slide-inner {
    display: grid; grid-template-columns: 1.05fr .95fr;
    padding-inline: 24px;
    gap: 50px; align-items: center;
    max-width: 1240px; margin-inline: auto; padding: 40px 24px 70px;
  }
  .slide-content { padding: 0; width: auto; }
  .slide-title-1 { font-size: 68px; }
  .slider-area { padding-bottom: 40px; }
  .slide-title-2 { font-size: 54px; }
  .slide-image img { aspect-ratio: 4 / 4.6; }
  .slide-image { position: static; }
}

/* slider furniture — the hero autoplays and is paged by its dots, so the
   arrows are dropped rather than fought with; owl keeps its arrows because
   the product row is not on a timer */
.slider-area .slick-prev, .slider-area .slick-next { display: none !important; }
.slick-dots {
  display: flex !important; justify-content: center; gap: 9px;
  list-style: none; padding: 0; margin: 22px 0 0;
}
.slick-dots li button {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  font-size: 0; border-radius: 50%; background: var(--secondary-color-two);
}
.slick-dots li.slick-active button { background: var(--main-color-one); width: 26px; border-radius: 9px; }
.owl-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.owl-nav button {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border-color) !important;
  border-radius: 16px 0 16px 0; font-size: 22px; color: var(--heading-color);
}
.owl-nav button:hover { background: var(--main-color-one); border-color: var(--main-color-one) !important; color: #fff; }
.owl-dots { display: none; }

/* the four marks -------------------------------------------------------- */
.service-item { padding: 26px 20px; height: 100%; background: var(--secondary-color); border-radius: 26px 0 26px 0; }
/* The vendor sets .service-icon img to a 105x115 terracotta tile with a white
   glyph. Keeping the tile is right — it echoes the section-title lockup — but
   the size has to be cut for a card this small, and .service-icon img alone
   ties with the vendor rule, so the selector is lengthened to win outright.
   The glyphs themselves are cream (see _build/make_art.py); clay strokes on a
   clay tile is why they did not appear at all. */
.service-item .service-icon img {
  width: 76px; height: 68px; padding: 12px;
  background-color: var(--main-color-one);
  border-radius: 0 22px 0 22px;
}
.service-item:hover .service-icon img { background-color: var(--secondary-color-three); }
.service-brief h4 { font-size: 19px; margin: 14px 0 8px; }
.service-brief p { font-size: 14.5px; margin: 0; }
.bloom-service-area .row > [class*="col-"] { margin-bottom: 20px; }

/* occasions ------------------------------------------------------------- */
.occasion-card { position: relative; display: block; overflow: hidden; border-radius: 26px 0 26px 0; margin-bottom: 20px; }
.occasion-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.occasion-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 35, 32, .78), rgba(46, 35, 32, 0) 58%); }
.occasion-card span {
  position: absolute; z-index: 2; inset-inline: 20px; bottom: 18px;
  font-family: var(--heading-font); font-size: 20px; color: #fff;
}
.occasion-card:hover img { transform: scale(1.06); }

.occasion-row { display: grid; gap: 24px; margin-bottom: 48px; }
.occasion-row__art img { width: 100%; border-radius: 40px 0 40px 0; object-fit: cover; aspect-ratio: 5 / 4; }
.occasion-row__text h2 { font-size: 26px; margin-bottom: 12px; }
.occasion-row__text p { margin-bottom: 20px; }
@media (min-width: 992px) {
  .occasion-row { grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; margin-bottom: 70px; }
  .occasion-row--rev .occasion-row__art { order: 2; }
  .occasion-row__text h2 { font-size: 32px; }
}

/* the builder band ------------------------------------------------------ */
.builder-band { background: var(--secondary-color); padding-block: 56px; }
.builder-band__art img { width: 100%; border-radius: 40px 0 40px 0; object-fit: cover; margin-top: 30px; }
.builder-band__list { list-style: none; padding: 0; margin: 0 0 26px; }
.builder-band__list li { position: relative; padding-inline-start: 26px; margin-bottom: 9px; }
.builder-band__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--main-color-one);
}
@media (min-width: 992px) {
  .builder-band { padding-block: 96px; }
  .builder-band__art img { margin-top: 0; }
}

/* the studio ------------------------------------------------------------ */
.studio-area .img-shape img { width: 100%; border-radius: 120px 0 120px 0; object-fit: cover; }
.studio-area__text { margin-top: 34px; }
.studio-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 26px 0; }
.studio-stats b {
  display: block; font-family: var(--heading-font); font-size: 34px;
  font-weight: 600; color: var(--main-color-one); line-height: 1;
}
.studio-stats span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 992px) { .studio-area__text { margin-top: 0; } }

/* the day, on the about page ------------------------------------------- */
.day-area { background: var(--secondary-color); }
.day-step { padding: 26px 22px; background: #fff; border-radius: 24px 0 24px 0; height: 100%; margin-bottom: 20px; }
.day-step b {
  display: block; font-family: var(--heading-font); font-size: 24px;
  color: var(--main-color-one); margin-bottom: 10px;
}
.day-step h4 { font-size: 18px; margin-bottom: 8px; }
.day-step p { font-size: 14.5px; margin: 0; }

/* testimonials ---------------------------------------------------------- */
.testimonial-item { padding: 0 6px; }
.testimonial-img .testimoni-main-img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 20px; border: 4px solid var(--secondary-color);
}
.testimonial-opinion p { font-family: var(--heading-font); font-size: 19px; line-height: 1.55; color: var(--heading-color); }
.testimonial-brief h6 { font-size: 16px; margin: 18px 0 2px; }
.testimonial-brief label { font-size: 13px; color: var(--main-color-one); }
@media (min-width: 768px) { .testimonial-opinion p { font-size: 23px; } }

/* journal --------------------------------------------------------------- */
.journal-card { background: #fff; border: 1px solid var(--border-color); border-radius: 26px 0 26px 0; overflow: hidden; margin-bottom: 24px; height: 100%; }
.journal-card__art { display: block; overflow: hidden; }
.journal-card__art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.journal-card:hover .journal-card__art img { transform: scale(1.05); }
.journal-card__body { padding: 22px 22px 26px; }
.journal-card .post-meta { list-style: none; padding: 0; margin: 0 0 10px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--main-color-one); }
.journal-card .blog-title { font-size: 20px; margin-bottom: 10px; }
.journal-card p { font-size: 14.5px; margin-bottom: 14px; }
.read-more { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--main-color-one); border-bottom: 1px solid currentColor; }

.post-body img { width: 100%; border-radius: 30px 0 30px 0; margin-bottom: 26px; }
.post-body .post-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0 0 22px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--main-color-one); }
.post-body h3 { font-size: 24px; margin: 30px 0 12px; }
.post-body p { margin-bottom: 16px; }
.post-body blockquote {
  margin: 30px 0 0; padding: 24px 26px; background: var(--secondary-color);
  border-inline-start: 4px solid var(--main-color-one); border-radius: 20px 0 20px 0;
  font-family: var(--heading-font); font-size: 19px; color: var(--heading-color);
}

/* gallery --------------------------------------------------------------- */
.bench-strip { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0 12px; }
.bench-strip img, .gallery-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bench-strip a, .gallery-tile { display: block; overflow: hidden; border-radius: 20px 0 20px 0; }
.bench-strip img, .gallery-tile img { transition: transform .6s ease; }
.bench-strip a:hover img, .gallery-tile:hover img { transform: scale(1.07); }
.gallery-tile { margin-bottom: 16px; }
.newsletter-img { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 30px 0 0; }
.newsletter-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px 0 26px 0; }
@media (min-width: 576px) { .bench-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .bench-strip { grid-template-columns: repeat(6, 1fr); padding-inline: 24px; } .newsletter-img { margin-top: 0; } }

/* newsletter ------------------------------------------------------------ */
.bloom-newsletter-area { background: var(--secondary-color); }
.form-input-box { position: relative; display: flex; margin-top: 20px; }
.form-input-box input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px;
  border: 1px solid var(--border-color); background: #fff;
  border-radius: 15px 0 0 0; font-family: var(--body-font); font-size: 15px;
}
.form-input-box input:focus { outline: none; border-color: var(--main-color-one); }
.form-input-box button {
  width: 56px; height: 52px; border: 0; cursor: pointer;
  background: var(--main-color-one); color: #fff; font-size: 18px;
  border-radius: 0 0 15px 0;
}
.form-input-box button:hover { background: var(--main-color-dark); }
[dir="rtl"] .form-input-box button i { transform: scaleX(-1); }

/* shop ------------------------------------------------------------------ */
.shop-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.shop-toolbar p { margin: 0; }
.product-item { margin-bottom: 30px; }
.product-image { position: relative; overflow: hidden; border-radius: 26px 0 26px 0; background: var(--secondary-color); }
.product-image img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; transition: transform .6s ease; }
.product-item:hover .product-image img { transform: scale(1.05); }
.product-badge ul { list-style: none; margin: 0; padding: 0; position: absolute; top: 14px; inset-inline-start: 14px; }
.product-badge li {
  padding: 4px 12px; border-radius: 20px 0 20px 0; font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.sale-badge { background: var(--main-color-one); }
.new-badge { background: var(--secondary-color-four); }
.product-action { position: absolute; inset-inline: 12px; bottom: 12px; opacity: 0; transform: translateY(10px); transition: .3s; }
.product-action ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.product-action a {
  display: block; padding: 9px 14px; background: #fff; color: var(--heading-color);
  font-size: 12.5px; font-weight: 600; border-radius: 18px 0 18px 0; white-space: nowrap;
}
.product-action a:hover { background: var(--main-color-one); color: #fff; }
.product-item:hover .product-action, .product-item:focus-within .product-action { opacity: 1; transform: none; }
.product-item-brief { padding-top: 16px; }
.product-title { font-size: 18px; margin-bottom: 6px; }
.product-price { font-family: var(--heading-font); font-size: 18px; color: var(--main-color-one); }
.product-price del { color: var(--secondary-color-six); margin-inline-end: 8px; font-size: 15px; }
/* touch devices never hover, so the actions have to be visible */
@media (hover: none) { .product-action { opacity: 1; transform: none; } }

/* product details ------------------------------------------------------- */
.pd-main img { width: 100%; border-radius: 40px 0 40px 0; object-fit: cover; aspect-ratio: 5 / 6; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pd-thumb img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 16px 0 16px 0; }
.pd-info { margin-top: 32px; }
.pd-title { font-size: 28px; margin-bottom: 10px; }
.pd-price { font-family: var(--heading-font); font-size: 26px; color: var(--main-color-one); margin-bottom: 18px; }
.pd-price del { font-size: 19px; color: var(--secondary-color-six); margin-inline-end: 10px; }
.pd-facts { list-style: none; padding: 0; margin: 22px 0; border-block: 1px solid var(--border-color); }
.pd-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
.pd-facts li:last-child { border-bottom: 0; }
.pd-facts b { color: var(--heading-color); font-weight: 600; }
.pd-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.pd-alt { font-size: 14.5px; }
.pd-alt a { color: var(--main-color-one); font-weight: 600; border-bottom: 1px solid currentColor; }
.cart-plus-minus { display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: 30px 0 30px 0; overflow: hidden; }
.cart-plus-minus input { width: 46px; height: 46px; border: 0; text-align: center; font-family: var(--body-font); font-size: 15px; }
.cart-plus-minus .qtybutton { width: 38px; height: 46px; display: grid; place-items: center; cursor: pointer; user-select: none; color: var(--heading-color); }
.cart-plus-minus .qtybutton:hover { background: var(--secondary-color); }
@media (min-width: 992px) { .pd-info { margin-top: 0; } .pd-title { font-size: 38px; } }

/* tables: cart, account ------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cart-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 14px 12px; text-align: start; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.cart-table th { font-family: var(--body-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--heading-color); }
.c-prod { display: flex; align-items: center; gap: 14px; }
.c-prod img { width: 64px; border-radius: 14px 0 14px 0; object-fit: cover; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 20px 0 20px 0; background: var(--secondary-color); font-size: 12.5px; color: var(--heading-color); }

.totals-card, .form-card {
  padding: 24px 22px; margin-bottom: 24px;
  background: var(--secondary-color); border-radius: 26px 0 26px 0;
}
.form-card { background: #fff; border: 1px solid var(--border-color); }
.totals-card h3, .form-card h3 { font-size: 21px; margin-bottom: 18px; }
.totals-card ul { list-style: none; padding: 0; margin: 0 0 18px; }
.totals-card li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-color); }
.totals-card li.grand { border-bottom: 0; padding-top: 14px; font-family: var(--heading-font); font-size: 19px; color: var(--heading-color); }
.totals-note { font-size: 13.5px; margin-bottom: 16px; }
.totals-card .boxed-btn, .form-card .boxed-btn, .totals-card button { width: 100%; }
.totals-card h4 { font-size: 16px; margin: 18px 0 10px; }
.pay-opt { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; }

/* forms ----------------------------------------------------------------- */
.form-card label { display: block; margin-bottom: 16px; }
.form-card label > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--heading-color); }
.form-card input, .form-card textarea, .form-card select {
  width: 100%; padding: 12px 16px; background: #fff;
  border: 1px solid var(--border-color); border-radius: 14px 0 14px 0;
  font-family: var(--body-font); font-size: 15px; color: var(--heading-color);
}
.form-card input:focus, .form-card textarea:focus { outline: none; border-color: var(--main-color-one); }
.form-card button[type="submit"] { border: 0; cursor: pointer; }
.auth-card { max-width: 520px; }
.auth-swap { margin-top: 16px; font-size: 14.5px; }
.auth-swap a { color: var(--main-color-one); font-weight: 600; border-bottom: 1px solid currentColor; }
.auth-art img { width: 100%; border-radius: 40px 0 40px 0; object-fit: cover; margin-top: 26px; }
@media (min-width: 992px) { .auth-art img { margin-top: 0; } }

.acc-nav { list-style: none; padding: 0; margin: 0; }
.acc-nav a { display: block; padding: 11px 0; border-bottom: 1px solid var(--border-color); font-size: 15px; }
.acc-nav a.is-on { color: var(--main-color-one); font-weight: 600; }

/* faq ------------------------------------------------------------------- */
.faq-item { border: 1px solid var(--border-color); border-radius: 22px 0 22px 0; margin-bottom: 14px; background: #fff; }
.faq-item summary {
  position: relative; padding: 18px 54px 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--heading-font); font-size: 18px; color: var(--heading-color);
}
[dir="rtl"] .faq-item summary { padding: 18px 22px 18px 54px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; inset-inline-end: 22px; top: 50%;
  transform: translateY(-50%); font-size: 24px; line-height: 1;
  color: var(--main-color-one); transition: transform .25s;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 22px 20px; margin: 0; }

/* contact --------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 22px 0 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
.contact-list i { color: var(--main-color-one); font-size: 18px; margin-top: 3px; }
.contact-facts { margin-bottom: 34px; }

/* 404 ------------------------------------------------------------------- */
.err-area { background: var(--secondary-color); }
.err-code { font-family: var(--heading-font); font-size: 92px; line-height: 1; color: var(--main-color-one); margin: 0 0 10px; }
.err-area h1 { font-size: 28px; margin-bottom: 14px; }
.err-area p { max-width: 46ch; margin-inline: auto; }
.err-area .btn-wrapper { justify-content: center; margin-top: 26px; }
@media (min-width: 768px) { .err-code { font-size: 150px; } .err-area h1 { font-size: 40px; } }

/* ============================================================
   03 · CHROME
   ============================================================ */

/* breadcrumb — the vendor's breadcrumb-style-1 was a terracotta panel sitting
   on a photograph; the photograph was Gazania's. Without it the panel reads as
   a stray bar, so the page header is a quiet tinted band instead. */
.breadcrumb-area {
  position: relative; padding-block: 52px; background: var(--secondary-color);
  background-image: none;
}
.breadcrumb-area::before { display: none; }
.breadcrumb-area .page-title { font-size: 30px; margin: 0 0 10px; color: var(--heading-color); }
.breadcrumb-area .page-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: 14px; }
/* the vendor already draws a chevron with ::after; one separator is enough */
.breadcrumb-area .page-list li::after { display: none !important; }
.breadcrumb-area .page-list li + li::before { content: "/"; margin-inline-end: 8px; color: var(--secondary-color-two); }
.breadcrumb-area .page-list li:last-child { color: var(--main-color-one); }
@media (min-width: 768px) { .breadcrumb-area { padding-block: 84px; } .breadcrumb-area .page-title { font-size: 44px; } }

/* navbar ---------------------------------------------------------------- */
.nav-style-01-wrap { background: var(--secondary-color); }
.navbar-area { padding-block: 14px; }
.navbar-area .nav-container { display: flex; align-items: center; gap: 16px; padding-inline: 16px; }
.responsive-mobile-menu { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.desktop-logo { display: none; }
.navbar-toggler { padding: 8px; background: none; border: 0; cursor: pointer; }
.navbar-toggler .line { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--heading-color); }
.navbar-nav { list-style: none; padding: 16px 0 6px; margin: 0; }
.navbar-nav a { display: block; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--heading-color); }
.navbar-nav .current-menu-item > a { color: var(--main-color-one); }
.nav-right-content > ul { list-style: none; display: flex; align-items: center; gap: 14px; padding: 12px 0 4px; margin: 0; }
.nav-right-content i { font-size: 18px; color: var(--heading-color); cursor: pointer; }
.mini-cart-icon { position: relative; }
.mini-cart-icon sup {
  position: absolute; top: -8px; inset-inline-end: -10px;
  min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  background: var(--main-color-one); color: #fff; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.mini-cart-icon sup[data-zero="1"] { background: var(--secondary-color-two); color: var(--heading-color); }
.user-menu { position: relative; }
.user-menu > a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.user-menu > ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 12px); z-index: 60;
  min-width: 180px; padding: 6px 0; margin: 0; list-style: none; background: #fff;
  border: 1px solid var(--border-color); border-radius: 14px 0 14px 0;
  box-shadow: 0 18px 40px rgba(46, 35, 32, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .22s;
}
.user-menu:hover > ul, .user-menu:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.user-menu > ul a { display: block; padding: 9px 18px; font-size: 14px; }
.user-menu > ul a:hover { background: var(--secondary-color); }

@media (min-width: 992px) {
  .responsive-mobile-menu { display: none; }
  .desktop-logo { display: block; }
  .navbar-area .nav-container { justify-content: space-between; padding-inline: 30px; }
  .navbar-collapse { flex: 1; }
  .navbar-nav { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 0; }
  .navbar-nav a { padding: 8px 0; position: relative; }
  .navbar-nav a::after {
    content: ""; position: absolute; inset-inline-start: 0; bottom: 2px;
    width: 0; height: 1px; background: var(--main-color-one); transition: width .3s;
  }
  .navbar-nav a:hover::after, .navbar-nav .current-menu-item > a::after { width: 100%; }
  .nav-right-content > ul { padding: 0; }
}
@media (min-width: 1200px) { .navbar-nav { gap: 34px; } }

/* footer ---------------------------------------------------------------- */
/* The vendor fills .footer-top and .copyright-area with --secondary-color,
   which paints cream straight over the dark footer — and every white string
   in here (wordmark, widget titles, address, copyright) then sat on cream and
   could not be seen. They are the footer's own background's business. */
.footer-area { background: var(--secondary-color-five); color: rgba(255, 255, 255, .68); }
body.qitaf .footer-area .footer-top,
body.qitaf .footer-area .copyright-area { background-color: transparent; }

/* Colour has to be reclaimed at the vendor's own weight: it styles footer text
   through `.widget.footer-widget ...` selectors carrying four classes, which
   outrank anything shorter. Everything in the footer is set once, here, rather
   than chasing each vendor rule separately. */
body.qitaf .footer-area,
body.qitaf .footer-area p,
body.qitaf .footer-area address,
body.qitaf .footer-area .copyright-area-inner,
body.qitaf .footer-area .widget.footer-widget p,
body.qitaf .footer-area .widget.footer-widget address,
body.qitaf .footer-area .widget.footer-widget ul li a,
body.qitaf .footer-area .widget.footer-widget .social_share ul li a { color: rgba(255, 255, 255, .72); }

body.qitaf .footer-area a:hover,
body.qitaf .footer-area .widget.footer-widget ul li a:hover,
body.qitaf .footer-area .widget.footer-widget .social_share ul li a:hover { color: #fff; }

body.qitaf .footer-area .widget-title,
body.qitaf .footer-area .qitaf-mark__word,
body.qitaf .footer-area address a,
body.qitaf .footer-area .copyright-area-inner a { color: #fff; }
body.qitaf .footer-area .qitaf-mark__sub { color: var(--secondary-color-two); }
.footer-top { padding-block: 52px 34px; }
.footer-area .widget-title { font-size: 16px; color: #fff; margin-bottom: 18px; letter-spacing: .04em; }
.footer-area p, .footer-area address { font-size: 14.5px; color: rgba(255, 255, 255, .68); }
.footer-area address { font-style: normal; margin: 16px 0; }
.footer-area a { color: rgba(255, 255, 255, .68); }
.footer-area a:hover { color: #fff; }
.footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-widget ul li { margin-bottom: 9px; font-size: 14.5px; }
.footer-widget { margin-bottom: 34px; }
.social_share ul { display: flex; gap: 10px; }
.social_share a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px 0 14px 0;
}
.social_share a:hover { background: var(--main-color-one); border-color: var(--main-color-one); color: #fff; }
.copyright-area { padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.copyright-area-inner { font-size: 13.5px; text-align: center; }
.copyright-area-inner a { color: #fff; text-decoration: underline; }
@media (min-width: 768px) { .footer-top { padding-block: 76px 40px; } }

/* back to top ----------------------------------------------------------- */
.back-to-top { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 90; display: none; }
.back-to-top .back-top {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--main-color-one); color: #fff; border-radius: 16px 0 16px 0;
}

/* search + overlay ------------------------------------------------------ */
.body-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(46, 35, 32, .6); opacity: 0; visibility: hidden; transition: .3s; }
.body-overlay.active { opacity: 1; visibility: visible; }
.search-popup {
  position: fixed; z-index: 100; inset-inline: 5%; top: 22%;
  opacity: 0; visibility: hidden; transform: translateY(-14px); transition: .3s;
}
.search-popup.active { opacity: 1; visibility: visible; transform: none; }
.search-form { display: flex; }
.search-form .form-group { flex: 1; }
.search-form .form-control { width: 100%; height: 58px; padding: 0 20px; border: 0; font-family: var(--body-font); font-size: 16px; }
.search-form .submit-btn { width: 62px; height: 58px; border: 0; cursor: pointer; background: var(--main-color-one); color: #fff; font-size: 18px; }
@media (min-width: 768px) { .search-popup { inset-inline: 20%; } }

/* mini cart ------------------------------------------------------------- */
.mini-cart-wrapper {
  position: fixed; z-index: 120; inset-block: 0; inset-inline-end: 0;
  width: min(360px, 88vw); background: #fff; overflow-y: auto;
  transform: translateX(110%); transition: transform .35s ease;
}
.mini-cart-wrapper.inside { transform: none; }
.sidebar-nav-icon { padding: 18px 20px 0; text-align: end; }
.mini-cart-close { background: none; border: 0; cursor: pointer; font-size: 20px; color: var(--heading-color); }
.mini-cart-inner { padding: 10px 20px 30px; }
.mini-cart-inner > ul { list-style: none; padding: 0; margin: 0; }
.cart-item { padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.cart-item-inner { display: flex; align-items: center; gap: 12px; }
.cart-item-inner .product-image img { width: 60px; border-radius: 12px 0 12px 0; }
.cart-item-brief { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.cart-product-title { flex: 1 0 100%; order: -1; }
.cart-item-brief .product-title { font-size: 15px; margin: 0; }
.cart-total { display: flex; justify-content: space-between; align-items: center; }
.cart-total h2 { font-size: 18px; margin: 0; }
.cart-btn { flex-direction: column; gap: 10px; align-items: stretch; }
.cart-btn .boxed-btn { width: 100%; }

/* ============================================================
   04 · RTL, WHERE LOGICAL PROPERTIES DO NOT REACH
   ============================================================ */

/* Arabic runs a little larger at the same nominal size and has no ascender
   rhythm to speak of, so it needs a touch more line height */
[dir="rtl"] body.qitaf { line-height: 1.95; }
[dir="rtl"] .slide-title-1 { letter-spacing: 0; }

/* Bootstrap in css-plugins.css is an LTR-only build: these three utilities
   name a physical side and are used by the vendor markup */
/* `.text-left` / `.text-right` in the vendor markup mean the start and end of
   the line, not west and east — mapping them to logical keywords makes them
   mirror instead of fighting the direction. */
body.qitaf .text-left, body.qitaf .mobile-text-left { text-align: start !important; }
body.qitaf .text-right { text-align: end !important; }
[dir="rtl"] .pr-0 { padding-inline-end: 0 !important; padding-inline-start: 0; }
[dir="rtl"] .float-left { float: inline-start; }
[dir="rtl"] .float-right { float: inline-end; }
[dir="rtl"] [class*="offset-"] { margin-inline-start: 0; }
[dir="rtl"] .offset-lg-1 { margin-inline-start: 8.333333%; }
[dir="rtl"] .offset-lg-2 { margin-inline-start: 16.666667%; }
[dir="rtl"] .offset-xl-1 { margin-inline-start: 8.333333%; }
[dir="rtl"] .offset-md-1 { margin-inline-start: 8.333333%; }

/* slick and owl position their arrows and track with physical left/right and
   translate3d; the carousels are told rtl:true at construction in main.js, so
   only the furniture needs mirroring here */
[dir="rtl"] .slick-prev, [dir="rtl"] .owl-prev { transform: scaleX(-1); }
[dir="rtl"] .slick-next, [dir="rtl"] .owl-next { transform: scaleX(-1); }

/* arrow glyphs point the way the reader travels */
[dir="rtl"] .read-more::after,
[dir="rtl"] .ti-arrow-right::before { transform: scaleX(-1); display: inline-block; }

/* Prices are a Latin token next to digits ("42 JD"). Dropped into an RTL
   paragraph the bidi algorithm reorders them to "JD 42", which is not how the
   price is written. Isolating each price and laying it out LTR keeps the
   number and its currency in the written order, while text-align: end keeps
   the whole thing on the reading edge. */
[dir="rtl"] .product-price,
[dir="rtl"] .pd-price,
[dir="rtl"] .totals-card li b,
[dir="rtl"] .totals-card li span + b,
[dir="rtl"] .cart-table td,
[dir="rtl"] .cart-item-brief .product-price,
[dir="rtl"] .cart-total h2 strong,
[dir="rtl"] .mobar .price,
[dir="rtl"] .rsum span,
[dir="rtl"] .rlist .n,
[dir="rtl"] .pv-row .n,
[dir="rtl"] .pv-total b {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
}
/* the product tile centres its price, so the isolation must not shove it over */
[dir="rtl"] .product-item.text-center .product-price { text-align: center; }

/* the mini cart slides in from the reading edge */
[dir="rtl"] .mini-cart-wrapper { transform: translateX(-110%); }
[dir="rtl"] .mini-cart-wrapper.inside { transform: none; }

/* the corner-cut radius is the template's signature; mirror it so the cut
   lands on the same optical corner in both directions */
[dir="rtl"] .boxed-btn.btn-rounded,
[dir="rtl"] .service-item,
[dir="rtl"] .occasion-card,
[dir="rtl"] .occasion-row__art img,
[dir="rtl"] .builder-band__art img,
[dir="rtl"] .journal-card,
[dir="rtl"] .day-step,
[dir="rtl"] .product-image,
[dir="rtl"] .totals-card,
[dir="rtl"] .form-card,
[dir="rtl"] .faq-item,
[dir="rtl"] .auth-art img,
[dir="rtl"] .pd-main img,
[dir="rtl"] .bench-strip a,
[dir="rtl"] .gallery-tile,
[dir="rtl"] .newsletter-img img,
[dir="rtl"] .post-body img,
[dir="rtl"] .post-body blockquote,
[dir="rtl"] .social_share a,
[dir="rtl"] .back-to-top .back-top,
[dir="rtl"] .lang-switch__btn,
[dir="rtl"] .section-title-2 .icon img { border-radius: 0 26px 0 26px; }
[dir="rtl"] .boxed-btn.btn-rounded, [dir="rtl"] .lang-switch__btn { border-radius: 0 30px 0 30px; }
[dir="rtl"] .section-title-2 .icon img { border-radius: 12px 0 12px 0; }
[dir="rtl"] .studio-area .img-shape img { border-radius: 0 120px 0 120px; }
[dir="rtl"] .slide-image img { border-radius: 0 90px 0 90px; }
[dir="rtl"] .form-input-box input { border-radius: 0 15px 0 0; }
[dir="rtl"] .form-input-box button { border-radius: 0 0 0 15px; }

/* ============================================================
   05 · MOTION AND PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .navbar-area, .footer-area, .back-to-top, .mini-cart-wrapper,
  .search-popup, .body-overlay, .preloader, .lang-switch { display: none !important; }
  body.qitaf { font-size: 12pt; color: #000; }
}