/* ============================================================
   Bridge: template chrome (fursan.css) coexisting with the
   Bootstrap-5 + site.css inner-page bodies. Loaded last.
   ============================================================ */

/* Inner page content wrapper spacing (between header/banner and footer) */
.tmpl-body main,
.tmpl-body .page-body { display: block; }

/* Product-card action icons: the cart/wishlist icons are now <form><button> (so the
   site.js AJAX handlers fire). Make those buttons look identical to the template's
   .product-action <a> icon boxes, and keep the four icons inline. */
/* Lay the action icons out evenly side-by-side (mix of <a> and <form> children). */
.tmpl-body .product-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.tmpl-body .product-action form { display: inline-flex; margin: 0; }
.tmpl-body .product-action button {
    background-color: #fff;
    border: 0;
    height: 38px;
    width: 38px;
    border-radius: 2px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}
.tmpl-body .product-action button img {
    height: 25px !important;
    width: 25px !important;
    object-fit: contain !important;
}
.tmpl-body .product-action .pa-out { opacity: .55; }

/* ---- Hero carousel: Bootstrap-5 markup, template visuals ----
   The template used Bootstrap-3 (.item + <ol> indicators); we run Bootstrap 5,
   so its .carousel-item / <button> indicators need the template's look re-applied. */
.tmpl-body #myCarousel .carousel-item { height: 100%; }
.tmpl-body #myCarousel .slider-video { width: 100%; height: 100%; }
.tmpl-body #myCarousel .slider-video video { width: 100%; height: 100%; object-fit: cover; }

/* Dot indicators like the template (on/off.png), aligned bottom-right */
.tmpl-body #myCarousel .carousel-indicators {
    bottom: 30px;
    margin: 0;
    justify-content: flex-end;
    padding-inline-end: 100px;
}
.tmpl-body #myCarousel .carousel-indicators [data-bs-slide-to] {
    width: 20px; height: 20px; margin: 2px;
    text-indent: -999px; opacity: 1; border: 0;
    background: url('/template/images/off.png') no-repeat center center;
}
.tmpl-body #myCarousel .carousel-indicators .active {
    width: 25px; height: 25px;
    background: url('/template/images/on.png') no-repeat center center;
}
html[dir="rtl"] .tmpl-body #myCarousel .carousel-indicators {
    justify-content: flex-start;
    padding-inline-end: 100px;
}

/* Featured-product title must match the template: the template's <h5> is plain text
   inheriting the body font (Futura 20px #482e20). Ours wraps the title in <a>, so it
   was shrunk by `.product-content a` (14px #464646) AND forced to serif by site.css's
   `h1..h5 { font-family: var(--font-display) }`. Restore the template look. */
.tmpl-body .product-content h5,
.tmpl-body .product-content h5 a {
    font-family: 'Futura', 'Almarai', sans-serif;
    font-size: 20px;
    color: #482e20;
    font-weight: 400;
    line-height: 1.3;
}
.tmpl-body .product-content h5 a:hover { color: #9da17f; text-decoration: none; }

/* Shop-by-Category page: space out each main-category block + its CTA. */
.tmpl-body .bg-Categories .cat-block { margin-bottom: 50px; }
.tmpl-body .bg-Categories .cat-block:last-child { margin-bottom: 0; }
.tmpl-body .bg-Categories .cat-block-cta { margin-top: 22px; }

/* Header cart/wishlist badges: the template's .circle is position:absolute but our
   cart/heart anchors weren't positioned, so the count floated away from the icon.
   Anchor each badge to the top-corner of its own icon. */
.tmpl-body .hdr-ico { position: relative; display: inline-block; }
.tmpl-body .hdr-ico .circle,
.tmpl-body .hdr-ico .hdr-badge {
    position: absolute;
    top: -8px; right: -8px; left: auto;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    margin: 0;
    border-radius: 9px;
    background-color: #b8bb9a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-style: normal;
}
html[dir="rtl"] .tmpl-body .hdr-ico .circle,
html[dir="rtl"] .tmpl-body .hdr-ico .hdr-badge {
    right: auto; left: -8px;
}

/* ---- Responsive header: desktop 3-column vs. mobile bar + off-canvas ----
   Custom classes (not .row/d-none) because the bridge forces .row to display:flex,
   which would defeat Bootstrap's .d-none. Switch at the lg breakpoint (992px). */
/* !important on both breakpoints so these beat the bridge's `.tmpl-body .row{display:flex}`
   (equal specificity would otherwise let the later .row rule show the mobile bar on desktop). */
@media (min-width: 992px) {
    .tmpl-body .hdr-mobile { display: none !important; }
    .tmpl-body .hdr-desktop { display: flex !important; }
}
@media (max-width: 991.98px) {
    .tmpl-body .hdr-desktop { display: none !important; }
    .tmpl-body .hdr-mobile { display: flex !important; }
}
.tmpl-body .hdr-m-side { display: flex; align-items: center; gap: 6px; }
.tmpl-body .hdr-m-right { justify-content: flex-end; }
.tmpl-body .hdr-m-btn {
    background: transparent; border: 0; padding: 6px;
    font-size: 1.35rem; line-height: 1; color: #482e20;
    display: inline-flex; align-items: center; text-decoration: none;
}
.tmpl-body .hdr-m-logo { height: 58px; width: auto; }

/* Off-canvas mobile nav */
.tmpl-offcanvas { max-width: 82vw; }
/* Guarantee the open state applies immediately. Disabling the slide transition means
   Bootstrap doesn't depend on a transition frame to finalize the open state, and the
   panel is on-screen the moment it gets .showing/.show. */
.tmpl-body .tmpl-offcanvas { transition: none !important; }
.tmpl-body .tmpl-offcanvas.show,
.tmpl-body .tmpl-offcanvas.showing { transform: none !important; visibility: visible !important; }
.tmpl-offcanvas .offcanvas-header { border-bottom: 1px solid #ece7e1; }
.tmpl-offcanvas .mobile-nav { list-style: none; padding: 0; margin: 0 0 1rem; }
.tmpl-offcanvas .mobile-nav > li > a {
    display: block; padding: .8rem .2rem; color: #482e20;
    font-family: 'Futura', 'Almarai', sans-serif; font-weight: 500; font-size: 1.05rem;
    text-decoration: none; border-bottom: 1px solid #f0ece6; text-transform: capitalize;
}
.tmpl-offcanvas .mobile-nav > li > a:hover { color: #9da17f; }
.tmpl-offcanvas .mobile-nav-tools { display: flex; flex-direction: column; gap: .4rem; padding-top: .6rem; border-top: 1px solid #f0ece6; }
.tmpl-offcanvas .mobile-nav-tools a { color: #6b5a4e; text-decoration: none; padding: .35rem .2rem; }
.tmpl-offcanvas .mobile-nav-tools a:hover { color: #482e20; }

/* Center the header logo like the template. The template centers it via Bootstrap-3's
   .img-responsive (display:block; max-width:100%) + .logo img{margin:auto}. Bootstrap 5
   has no .img-responsive, so the image stayed inline and hugged the left of its column. */
.tmpl-body .header .logo { text-align: center; }
.tmpl-body .header .logo img,
.tmpl-body .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* ---- Welcome / story section: restore the template look ----
   site.css had re-themed .pic-welcome and .welcome-years; and Bootstrap 5 columns
   are NOT position:relative (Bootstrap 3's were), so the absolutely-positioned
   .pic-welcome box escaped its column. Re-anchor it and restore template styling. */
.tmpl-body .welcome .col-md-6 { position: relative; }
.tmpl-body .welcome-years {
    font-family: 'Baskerville Old Face', Georgia, serif;
    font-size: 100px;
    color: #482e20;
    line-height: 1;
    margin-bottom: 10px;
}
.tmpl-body .welcome-text { height: 100px; overflow: hidden; line-height: 26px; margin-bottom: 10px; }
.tmpl-body .welcome-img { width: 500px; max-width: 100%; margin: 60px 0 auto auto; border-radius: 5px; }
.tmpl-body .pic-welcome {
    min-height: 415px; height: auto; width: 415px; max-width: 100%;
    color: #fff; font-weight: 300; text-align: center; text-transform: uppercase;
    font-size: 21px; line-height: 1.5; font-family: 'Futura', 'Almarai', sans-serif; font-style: normal;
    background: #b8bb9a url('/template/images/bg2.png') no-repeat right bottom;
    background-size: contain;
    padding: 40px; border-radius: 5px;
    position: absolute; top: 0; left: 15px;
    border: 0; box-shadow: none; margin: 0;
    display: flex; flex-direction: column; justify-content: center;
}
html[dir="rtl"] .tmpl-body .pic-welcome { left: auto; right: 15px; }
.tmpl-body .pic-welcome span {
    text-transform: capitalize; font-size: 16px; display: block;
    border-top: 1px rgba(255,255,255,.6) solid; padding: 18px 0 0; margin-top: 18px;
    font-style: normal; color: #fff; font-weight: 400;
}

/* Match the template's menu typography exactly: use the template's own Futura faces
   (font-web) instead of the site.css FuturaBT-Bold that the 600-weight was resolving to. */
.tmpl-body #cssmenu > ul > li > a {
    font-family: 'Futura', 'Almarai', sans-serif;
    font-weight: 500;          /* FuturaBT-Medium — clean medium, not the heavy 700 */
    letter-spacing: .2px;
}

/* The template's .newletter .btn is position:absolute (right:15px;top:10px) and must
   anchor to the input group. Without a positioned ancestor it escaped to the page's
   top-right corner (a stray arrow). Make the form group the containing block. */
.tmpl-body .footer .newletter .form-group { position: relative; }
html[dir="rtl"] .tmpl-body .footer .newletter .btn-newsletter { right: auto; left: 15px; }

/* Newsletter input: template's underlined style (Bootstrap 5 was boxing it) */
.tmpl-body .footer .newletter .form-control {
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.5);
    border-radius: 0;
    color: #fff;
    box-shadow: none !important;
    padding-inline-start: 0;
}
.tmpl-body .footer .newletter .form-control::placeholder { color: rgba(255,255,255,.65); }
.tmpl-body .footer .newletter .form-control:focus { border-color: #fff; color: #fff; }

/* ---- Inner-page caption (.caption-inner) match the template ----
   Bootstrap 5 turns .breadcrumb into a left-aligned flex row (loaded after fursan.css),
   so the template's centered inline breadcrumb drifted left. Re-center it. And the
   caption <h3> must inherit the template body font (Futura), not site.css's Baskerville. */
.tmpl-body .caption-inner .breadcrumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: transparent;
}
.tmpl-body .caption-inner h3 {
    font-family: 'Futura', 'Almarai', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: #fff;
}
/* The .inner-bg overlay (absolute) sat above the caption content and swallowed clicks,
   so the breadcrumb links weren't clickable. Let clicks pass through and lift the content. */
.tmpl-body .caption-inner .inner-bg { pointer-events: none; }
.tmpl-body .caption-inner .container { position: relative; z-index: 2; }
.tmpl-body .caption-inner .breadcrumb a { position: relative; z-index: 3; }

/* fursan.css strips list styling globally — restore it for rich CMS/page content */
.tmpl-body .page-content ul,
.tmpl-body .page-content ol { list-style: revert; padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.tmpl-body .page-content ul li,
.tmpl-body .page-content ol li { list-style: inherit; }

/* Ensure Bootstrap-5 flex grid wins over any template float grid on inner pages */
.tmpl-body .row { display: flex; flex-wrap: wrap; }

/* Keep my component buttons/inputs looking right (site.css already styles them;
   guard against template overrides that use element selectors) */
.tmpl-body .btn { text-decoration: none; }

/* Give inner content some breathing room when there is no caption banner */
.tmpl-body .container.py-5,
.tmpl-body .container.py-4 { min-height: 40vh; }

/* ---- Inner-page banner styled like the template's .caption-inner ---- */
.tmpl-body .page-banner,
.tmpl-body .page-header {
    position: relative;
    background: linear-gradient(rgba(72,46,32,.55), rgba(72,46,32,.55)), url('/template/images/14.jpg') center/cover no-repeat;
    padding: 4.5rem 1rem;
    text-align: center;
    border: 0;
    margin-bottom: 2rem;
}
.tmpl-body .page-banner h1,
.tmpl-body .page-header h1 {
    color: #fff;
    font-family: 'Baskerville Old Face', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
}
.tmpl-body .page-banner .breadcrumb,
.tmpl-body .page-header .breadcrumb {
    justify-content: center;
    background: transparent;
    margin: 0 0 .5rem;
}
.tmpl-body .page-banner .breadcrumb a,
.tmpl-body .page-header .breadcrumb a { color: #f0ece6; text-decoration: none; }
.tmpl-body .page-banner .breadcrumb .active,
.tmpl-body .page-header .breadcrumb .active,
.tmpl-body .page-banner .breadcrumb-item.active,
.tmpl-body .page-header .breadcrumb-item.active { color: #d9dcc0; }
.tmpl-body .page-header .container { position: relative; z-index: 2; }
html[dir="rtl"] .tmpl-body .page-banner .breadcrumb,
html[dir="rtl"] .tmpl-body .page-header .breadcrumb { justify-content: center; }