/* SAFA ALSALAM — brand additions on top of the Castro template.
   Loaded after style.css / color.css / responsive.css. */

/* Castro's .auto-container caps out at max-width:1200px everywhere
   (hero, shop grid, gallery, footer, ...) — fine up to a normal laptop
   window, but on a genuinely wide browser window (a large/high-res
   display maximized, common on modern MacBooks) that leaves a wide
   band of empty margin on both sides and every section reads as
   small and boxed-in relative to the window. Letting the container
   grow a little further past that point uses the extra width instead
   of just padding it out. Below 1440px this changes nothing — a
   normal laptop/monitor window (Windows included) still gets the
   original 1200px container. */
@media (min-width: 1440px) {
    .auto-container {
        max-width: 1340px;
    }
}
@media (min-width: 1700px) {
    .auto-container {
        max-width: 1500px;
    }
}

/* Simple hero — deliberately NOT reusing .banner-style-one/.slide-item,
   which are tightly coupled to owl-carousel's JS (position depends on an
   `.active` class the carousel plugin adds; without it those elements
   never get laid out and the whole section collapses). A single static
   hero doesn't need a carousel, so this is a small independent layout. */
.safa-hero {
    position: relative;
    background: #f7f3ec;
    padding: 70px 0;
    overflow: hidden;
}
.safa-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.safa-hero__content {
    max-width: 560px;
}
.safa-hero__content h1 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 46px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 10px;
}
.safa-hero__content h3 {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #c9a227;
    margin-bottom: 20px;
}
.safa-hero__content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}
.safa-hero__image {
    flex: 0 0 auto;
    width: 360px;
    max-width: 100%;
    aspect-ratio: 3 / 4; /* same shape as config/media.php 'product' */
    overflow: hidden;
}
.safa-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 767px) {
    .safa-hero__inner { flex-direction: column-reverse; text-align: center; }
    .safa-hero__content { max-width: 100%; }
}

/* Multi-banner hero carousel (.banner-carousel, real owl-carousel this
   time). Castro's own .image-box CSS never sizes its <img> — it assumed a
   real photograph with intrinsic pixel dimensions; our bottle images are
   viewBox-only SVGs with no intrinsic size, so without an explicit width
   the browser collapses both the img and its absolutely-positioned
   .image-box parent to 0x0. */
.banner-style-one {
    background: #f7f3ec;
}
.banner-carousel .content-inner .image-box {
    width: 240px;
    max-width: 32vw;
}
.banner-carousel .content-inner .image-box img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}
@media (max-width: 767px) {
    .banner-carousel .content-box {
        min-height: 0;
        padding: 220px 0 40px 0;
    }
    .banner-carousel .content-inner .image-box {
        max-width: 60vw;
        right: 50%;
        transform: translateX(50%);
        top: 40px;
        bottom: auto;
    }
    .banner-carousel .active .content-inner .image-box {
        transform: translateX(50%) translateY(0);
    }
}

/* Hover-swap product image (perfume bottle front/back), matching how the
   rest of the site already behaves — no color/size variation swatches,
   this is a single-image-per-product catalogue. */
.shop-block-one .inner-box .image-box {
    position: relative;
    aspect-ratio: 3 / 4; /* same shape as config/media.php 'product' */
    background: #f7f3ec;
}
.shop-block-one .inner-box .image-box img.product-image-primary,
.shop-block-one .inner-box .image-box img.product-image-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 500ms ease, transform 600ms ease;
}
.shop-block-one .inner-box .image-box img.product-image-hover {
    opacity: 0;
}
.shop-block-one .inner-box:hover .image-box img.product-image-primary {
    opacity: 0;
}
.shop-block-one .inner-box:hover .image-box img.product-image-hover {
    opacity: 1;
}

.shop-block-one .inner-box .image-box .category.gold-bg {
    background: #c9a227;
}
.shop-block-one .inner-box .image-box .category.gold-bg:before,
.shop-block-one .inner-box .image-box .category.gold-bg:after {
    background: #c9a227;
}
.shop-block-one .inner-box .image-box .out-of-stock {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #222;
    z-index: 2;
}

.shop-block-one .inner-box .lower-content .short-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #888;
    margin: 4px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Always reserve two lines of space — a product with a one-line (or
       missing) description would otherwise sit shorter than one with a
       full two-line description, throwing off row alignment. */
    height: 41.6px;
}

/* Equal-height cards across a row, with the Add to Cart button pinned to
   the same bottom edge regardless of how much text sits above it. */
.shop-block {
    display: flex;
}
.shop-block-one {
    display: flex;
    width: 100%;
}
.shop-block-one .inner-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.shop-block-one .inner-box .lower-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Quick-action icon — wishlist top-right (clears the category badge,
   which sits above it at the very top edge). Add-to-cart lives as a real
   button below the price instead of an icon over the image (see
   .add-to-cart-btn) — wishlist's heart (fas fa-heart, always filled)
   turns red once favorited. Hidden until the card is hovered. */
.shop-block-one .inner-box .image-box .quick-icon-btn {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease, background 300ms ease, color 300ms ease;
}
.shop-block-one .inner-box:hover .image-box .quick-icon-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shop-block-one .inner-box .image-box .wishlist-icon-btn {
    right: 15px;
}

/* Badge (Deal/Featured/-N%) on the left, wishlist heart on the right —
   they used to both sit on the right edge, forcing the heart down to
   top:60px to duck under the badge. */
.shop-block-one .inner-box .image-box .category {
    left: 0;
    right: auto;
    /* The absolutely-positioned product images come later in the DOM, so
       without this they paint over the badge and clip it (esp. on hover). */
    z-index: 3;
    width: auto;
    min-width: 64px;
    padding: 0 12px;
    white-space: nowrap;
}
.shop-block-one .inner-box .image-box .category:before {
    left: auto;
    right: -6px;
    clip-path: polygon(100% 0%, 0 0, 0 100%, 0 100%, 100% 0%);
}
.shop-block-one .inner-box .image-box .category:after {
    left: auto;
    right: -6px;
    clip-path: polygon(100% 100%, 0% 0%, 0% 100%, 100% 100%, 100% 0);
}
.shop-block-one .inner-box .image-box .wishlist-icon-btn:hover {
    background: #c9a227;
    color: #fff;
}
.shop-block-one .inner-box .image-box .wishlist-icon-btn.active {
    color: #e63946;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.shop-block-one .inner-box .image-box .wishlist-icon-btn.active:hover {
    background: #fff;
    color: #e63946;
}

.shop-block-one .inner-box .lower-content .add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 10px;
    border: 1px solid #222;
    border-radius: 2px;
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.shop-block-one .inner-box .lower-content .add-to-cart-btn:hover {
    background: #222;
    color: #fff;
}
.shop-block-one .inner-box .lower-content .add-to-cart-btn.disabled {
    border-color: #eee;
    background: #f5f5f5;
    color: #aaa;
    pointer-events: none;
}

.shop-block-one .inner-box .lower-content .price del {
    color: #999;
    font-weight: 400;
    margin-right: 6px;
    font-size: 13px;
}
.shop-block-one .inner-box .lower-content .price ins {
    text-decoration: none;
    color: #c9a227;
}

/* Product tile — bold name, medium-weight price (previously both just
   inherited the plain body weight). */
.shop-block-one .inner-box .lower-content > a {
    font-weight: 700;
}
.shop-block-one .inner-box .lower-content .price {
    font-weight: 500;
}

/* Product detail page: same discount styling */
.product-details-content .product-info .item-price del {
    color: #999;
    font-weight: 400;
    margin-right: 10px;
    font-size: 18px;
}
.product-details-content .product-info .item-price ins {
    text-decoration: none;
}
.product-details-content .product-info .stock-status {
    display: inline-block;
    margin: 10px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.product-details-content .product-info .stock-status.in-stock { color: #2e9e4f; }
.product-details-content .product-info .stock-status.low-stock { color: #c9a227; }
.product-details-content .product-info .stock-status.out-stock { color: #d0342c; }

/* Logo text fallback when no image logo is uploaded yet */
.logo-box .logo-text,
.footer-logo .logo-text {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #1b1b1b;
    text-transform: uppercase;
}
.logo-box .logo-text {
    font-size: 19px;
}
.footer-logo .logo-text {
    font-size: 24px;
}
.main-footer .logo-text {
    color: #222;
}

/* Footer background — was plain white/light-grey, which reads as a
   generic template default next to the rest of the site's warm cream +
   gold palette (.safa-hero, product image panels, thumb-list, etc. all
   use this same #f7f3ec). Text/link colors above are already dark
   (#222/#848484), so contrast on this lighter cream stays the same. */
.main-footer .footer-top {
    background: #f7f3ec;
}
.footer-bottom {
    background: #efe6d3;
}

/* Footer social icons — Castro's stock version was plain 13px glyphs
   in the body's grey text color, easy to miss and with no per-platform
   identity. Real brand colors + circular badges, matching each
   platform's own recognizable look (Facebook blue, Instagram's
   gradient, TikTok black). The `li.facebook` etc. classes come from the
   footer markup in layouts/shop.blade.php. */
.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.footer-social li {
    margin-right: 0;
}
.footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #848484;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.footer-social li a:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.footer-social li.facebook a {
    background: #1877f2;
}
.footer-social li.instagram a {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-social li.tiktok a {
    background: #010101;
}
/* The bundled font-awesome-all.css ships a broken .fa-tiktok rule (its
   codepoint \f6cc collides with .fa-dev, so it rendered the dev.to "DEV"
   glyph instead of the TikTok note) — an inline SVG sidesteps that font
   file entirely. */
.footer-social li.tiktok .tiktok-icon {
    width: 17px;
    height: 17px;
}
.footer-social li.youtube a {
    background: #ff0000;
}

/* Footer contact list — Castro's stylesheet only ever styled the
   .contact-widget variant of .info-list; our footer uses .logo-widget's
   copy instead, so the phone/email links fell through to the browser's
   default blue instead of matching the plain-text address next to them,
   and (being unstyled) had no breathing room between address/phone/email
   either — they all sat flush against each other. */
.footer-widget.logo-widget .footer-logo {
    margin-bottom: 18px;
}
.main-footer .footer-widget.logo-widget .info-list {
    margin-bottom: 20px;
}
.main-footer .footer-widget.logo-widget .info-list li,
.main-footer .footer-widget.logo-widget .info-list li a {
    color: #848484;
}
.main-footer .footer-widget.logo-widget .info-list li {
    line-height: 1.6;
    margin-bottom: 14px;
}
.main-footer .footer-widget.logo-widget .info-list li:last-child {
    margin-bottom: 0;
}
.main-footer .footer-widget.logo-widget .info-list li a:hover {
    color: #c9a227;
}
/* Phone — the one contact item given a subtle highlight (bold + the
   site's existing gold accent), so it reads slightly more prominent
   without a redesign; nothing else about the list changes. */
.main-footer .footer-widget.logo-widget .info-list li a[href^="tel:"] {
    color: #c9a227;
    font-weight: 600;
}

/* Header — smaller overall than Castro's stock sizing. The sticky header
   is a full structural clone of the normal one (logo + nav + icons, same
   classes) so it can just share these rules via the common .main-header
   ancestor instead of drifting into its own look on scroll — the only
   sticky-specific overrides left below are the ones needed to beat
   Castro's own !important rules for the stock (different-looking)
   sticky nav. */
.main-header .outer-box {
    min-height: 46px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}
.main-header .outer-box .logo-box,
.main-header .outer-box .menu-right-content {
    flex: 0 0 auto;
}
.main-header .outer-box .menu-area {
    flex: 1 1 auto;
    justify-content: center;
}
.main-header .logo-box {
    padding: 10px 0;
}
.main-menu .navigation > li {
    padding: 12px 0;
    margin: 0 24px 0 0;
}
.main-menu .navigation > li:last-child {
    margin-right: 0;
}
.main-menu .navigation > li > a {
    font-size: 13px;
    line-height: 22px;
    padding-right: 0;
}
.sticky-header .main-menu .navigation > li {
    padding: 12px 0 !important;
    margin: 0 24px 0 0 !important;
}
.sticky-header .main-menu .navigation > li:last-child {
    margin-right: 0 !important;
}
/* Icon row (search, account, wishlist, cart) — one consistent size and
   alignment so every icon lines up the same way, without wrapping them
   in a circular button (plain glyphs, matching the brand's flat look). */
.main-header .menu-right-content {
    margin: 0;
    gap: 10px;
}
.main-header .menu-right-content li {
    font-size: 16px;
    font-weight: 400;
    margin-right: 0;
    display: flex;
    align-items: center;
}
.main-header .menu-right-content li a,
.main-header .menu-right-content li .search-toggler,
.main-header .menu-right-content li .account-avatar-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 18px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 200ms ease, opacity 200ms ease, visibility 200ms ease;
}
.main-header .menu-right-content li a:hover,
.main-header .menu-right-content li .search-toggler:hover,
.main-header .menu-right-content li .account-avatar-btn:hover {
    color: #c9a227;
}
.main-header .menu-right-content li.shop-account {
    position: relative;
}
.main-header .menu-right-content li .account-avatar-btn img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.main-header .menu-right-content li .account-avatar-btn .account-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f7f3ec;
    color: #c9a227;
    font-size: 14px;
    font-weight: 700;
}

/* Account dropdown — same expanding-panel pattern as the header search
   box (absolute, fades + slides in), listing the logged-in customer's
   quick links instead of a search field. */
.account-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 240px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
    z-index: 500;
}
.account-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.account-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.account-dropdown-header strong {
    font-size: 14px;
    color: #1b1b1b;
}
.account-dropdown-header span {
    font-size: 12px;
    color: #888;
}
/* Beats .main-header .menu-right-content li a's 40x40 icon-button rule
   (higher specificity than a plain .account-dropdown a would have),
   which otherwise squashed these into 40px-wide boxes and wrapped the
   label text onto multiple lines. */
.main-header .menu-right-content .account-dropdown a,
.main-header .menu-right-content .account-dropdown button {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    width: 100% !important;
    height: auto !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    color: #444;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.account-dropdown a i,
.account-dropdown button i {
    width: 16px !important;
    font-size: 14px !important;
    color: #c9a227;
}
.account-dropdown a:hover,
.account-dropdown button:hover {
    background: #f7f3ec;
    color: #1b1b1b;
}
.account-dropdown form {
    border-top: 1px solid #eee;
}
.main-header .menu-right-content li.shop-cart a span {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #c9a227;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    box-shadow: none;
}

.sticky-header .menu-area {
    display: flex;
}
/* The sticky header is pinned flush to the viewport's top edge (top: 0),
   unlike the default header which has a little natural slack above it —
   so a badge sitting above its icon here has no room and gets clipped
   by the viewport itself. Pin it flush to the icon instead. */
.sticky-header .menu-right-content li.shop-cart a span {
    top: 0;
}
.sticky-header .main-menu .navigation > li > a {
    padding: 0 !important;
    padding-right: 14px !important;
    font-size: 13px !important;
    line-height: 22px !important;
    color: #222 !important;
}
.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a {
    color: #c9a227 !important;
    background: transparent !important;
}
.sticky-header .main-menu .navigation > li.dropdown > a:before {
    display: block !important;
}

.categories-list li.active a {
    font-weight: 700;
}

/* Rating stars read-only display */
.rating-box .star-filled,
.rating li.star-filled {
    color: #ff8840;
}

/* Shop sidebar: plain min/max price inputs, deliberately not the jQuery-UI
   .price-range-slider Castro ships (same plugin-coupling trap as the old
   banner carousel — it needs its own JS init and doesn't tie to real
   min_price/max_price query params anyway). */
.sidebar .price-filter .price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.sidebar .price-filter .price-inputs input[type="number"] {
    width: 100%;
    height: 42px;
    border: 1px solid #e5e5e5;
    padding: 8px 12px;
    font-size: 14px;
    color: #222;
}
.sidebar .price-filter .price-inputs span {
    color: #999;
}

.shop-page-content .no-results {
    padding: 30px 0;
    font-size: 16px;
    color: #555;
}

/* Laravel's bootstrap-5 paginator, restyled gold to match the brand */
.pagination-wrapper .pagination {
    display: flex;
    list-style: none;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.pagination-wrapper .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e5e5e5;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0;
}
.pagination-wrapper .page-link:hover {
    background: #f7f3ec;
    color: #c9a227;
}
.pagination-wrapper .page-item.active .page-link {
    background: #c9a227;
    border-color: #c9a227;
    color: #fff;
}
.pagination-wrapper .page-item.disabled .page-link {
    color: #ccc;
}

/* Product details page — deliberately NOT reusing Castro's
   jquery.bootstrap-touchspin-coupled .item-quantity markup (same
   plugin-lifecycle trap as the old banner carousel); this is a small,
   independent +/- spinner instead. No size/color swatches anywhere here —
   single-image perfume catalogue, not clothing. */
.product-details-content .product-image {
    position: relative;
    background: #f7f3ec;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 3 / 4; /* same shape as config/media.php 'product' */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Direct child only — Drift's zoom-on-hover pane (.tf-zoom-main /
   #zoomPane) lives nested inside this same .product-image box, and its
   own dynamically-created <img> (.drift-zoom-pane img, several levels
   deeper) is technically a descendant of .product-image too. A plain
   descendant selector here caught that image as well, shrinking Drift's
   deliberately oversized (zoomFactor × source-size) zoom image down to
   fit "80% of the pane" — which made the pane's crop barely larger than
   the small source image, reading as almost no zoom at all. */
.product-details-content .product-image > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
.product-details-content .product-image .category {
    position: absolute;
    left: 20px;
    top: 20px;
}
.product-details-content .thumb-list {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 0 0 6px;
    list-style: none;
    /* Up to 12 images (cover + hover + 10 additional) — scroll sideways
       rather than overflowing the column on narrow screens. */
    overflow-x: auto;
    scrollbar-width: thin;
}
.product-details-content .thumb-list li {
    flex: 0 0 auto;
}
.product-details-content .thumb-list li button {
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    background: #f7f3ec;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 300ms ease;
}
.product-details-content .thumb-list li button.active,
.product-details-content .thumb-list li button:hover {
    border-color: #c9a227;
}
.product-details-content .thumb-list li button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details-content .product-info .category-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c9a227;
}

.product-details-content .product-info .product-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.product-details-content .product-info .product-tags .tags-label {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.product-details-content .product-info .product-tags .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.product-details-content .product-info .product-tags .tags-list li a {
    display: inline-block;
    padding: 5px 16px;
    font-size: 13px;
    color: #666;
    border: 1px solid #e6e6e6;
    text-transform: capitalize;
    transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}
.product-details-content .product-info .product-tags .tags-list li a:hover {
    color: #fff;
    background: #222;
    border-color: #222;
}

/* Zoom-on-hover main image (assets/js/drift.min.js, drift-basic.min.css):
   Drift draws its own lens box (.drift-bounding-box) over the small image
   and opens the magnified crop in the separate #zoomPane beside it —
   desktop-only (see the width guard in the init script and the
   breakpoint below). */
.product-details-content .product-image.zoom-image {
    cursor: zoom-in;
}
/* Lives INSIDE .product-image (its own position: relative box) rather
   than being measured off it separately — "100%" here always matches the
   image's own size exactly, and "left: 100%" docks it flush against the
   image's real right edge, however wide that box happens to be, with no
   pixel values to keep in sync by hand. */
.tf-zoom-main {
    position: absolute;
    top: 0;
    left: calc(100% + 24px);
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
}
/* Drift only inserts its .drift-zoom-pane element into this container
   while actively zooming (removed again on hide) — the white card look
   has to live on THAT element, not on this always-present wrapper, or
   it renders as a permanent opaque box over the info column next to it. */
.tf-zoom-main .drift-zoom-pane {
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* drift-basic.min.css fades/scales the pane in over ~180ms on open (and
   back out on close) — that read as a laggy pop-in. Drift also waits for
   this animation's `animationend` event before finishing hide (removing
   the pane from the DOM), so cutting it with `animation: none` broke
   that: the white card was left behind after moving off the image with
   nothing left to fire the event. Keeping the same open/close animation
   but shortening it keeps the scale-in effect, still completes fast
   enough to feel instant, and fires `animationend` so hide still cleans
   up properly. */
.tf-zoom-main .drift-zoom-pane.drift-opening,
.tf-zoom-main .drift-zoom-pane.drift-closing {
    animation-duration: 0.06s !important;
}
/* Drift sizes this inline as (image size / zoomFactor) — that's the
   actual region getting captured and magnified into the pane, so
   forcing it to an arbitrary fixed size (as this rule used to) breaks
   the correspondence between what the lens covers and what the pane
   shows: the pane keeps rendering whatever real FOV Drift computed
   internally regardless of the lens's own CSS size, so a lens pinned
   much smaller than that FOV just looks like hovering barely zooms
   in at all — nearly the same image again. Only cosmetic styling here,
   no size override, so the lens honestly reflects what's magnified. */
.drift-bounding-box {
    border: 2px solid #c9a227;
    background-color: rgba(255, 255, 255, 0.25) !important;
}
@media (max-width: 991px) {
    .tf-zoom-main {
        display: none !important;
    }
}

.product-details-content .product-info .othre-options {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 25px;
}
.quantity-box {
    display: flex;
    align-items: stretch;
    border: 1px solid #e6e6e6;
    height: 45px;
}
.quantity-box button {
    width: 36px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #222;
    cursor: pointer;
}
.quantity-box input {
    width: 45px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}
.product-details-content .product-info .item-quantity .quantity-box {
    height: 53px;
}
.product-details-content .product-info .item-quantity .quantity-box button {
    width: 40px;
    font-size: 18px;
}
.product-details-content .product-info .item-quantity .quantity-box input {
    width: 50px;
    font-size: 16px;
}
/* Castro's own .item-quantity (built for its absolutely-positioned
   touchspin buttons) adds a 40px left+right padding and its own border —
   with our plain button+input+button .quantity-box inside, that padding
   just squeezed the real control down into a sliver on the right,
   leaving a wide blank strip on the left and a double border. */
.product-details-content .product-info .othre-options .item-quantity {
    padding: 0;
    border: none;
    max-width: none;
    width: auto;
    float: none;
    display: block;
}
/* Hide the native number-input spin arrows — the +/- buttons already
   cover incrementing, so the browser's own stepper just looked like a
   second, inconsistent control glued to the input. */
.quantity-box input::-webkit-outer-spin-button,
.quantity-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-box input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.alert-box {
    padding: 14px 20px;
    margin-bottom: 30px;
    font-size: 14px;
    border-radius: 2px;
}
.alert-box.success-box {
    background: #eaf7ee;
    color: #2e9e4f;
    border: 1px solid #cdebd6;
}
.alert-box.fail-box {
    background: #fdecea;
    color: #d0342c;
    border: 1px solid #f8d3cf;
}
.alert-box ul {
    margin: 0;
    padding-left: 18px;
}

.product-discription .review-inner .review-date {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
}
.product-discription .review-form {
    margin-top: 20px;
}
.review-media {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.review-media img,
.review-media video {
    width: 84px;
    height: 84px;
    border-radius: 4px;
    border: 1px solid #eee;
    object-fit: cover;
    transition: transform 250ms ease;
}
.review-media a:hover img {
    transform: scale(1.05);
}
.product-discription .review-form h4 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}
.product-discription .review-form .form-group {
    margin-bottom: 20px;
}
.product-discription .review-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.product-discription .review-form input,
.product-discription .review-form select,
.product-discription .review-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
    font-size: 14px;
    color: #222;
}

.shop-section.related-products {
    padding-top: 0;
}

/* Shop section / footer — Castro's stock 120px section bottom padding
   plus the footer's own 100px top padding stacked into ~220px of dead
   space between the last button on the page (e.g. "View All
   Fragrances") and the footer content, on every page using this layout
   (shop-section is always the immediate sibling right before
   <footer class="main-footer">). Trimming both closes that gap while
   still leaving clear breathing room. */
.shop-section,
.shop-page-section {
    padding-bottom: 90px;
}
.main-footer .footer-top {
    padding-top: 60px;
}

/* Deals CTA banner — Castro's 375px top padding assumed a full-bleed
   hero photo peeking above the white card; repurposed here as a compact
   "N Deals Available" strip directly under the shop grid, that padding
   just left a huge blank gap before the box appeared, on every
   viewport width (Castro's own responsive.css never touches this
   property). overflow:hidden keeps the 675px-tall backdrop image from
   spilling into whatever section follows now that the section itself
   is much shorter. */
.cta-section {
    padding-top: 70px;
    overflow: hidden;
}

/* Reviews tab (product page) — a proper review card (avatar + name/date
   row + stars + text + media), rebuilt from scratch rather than reusing
   Castro's .review-inner: its 100px left padding reserved room for an
   avatar image this markup never rendered, its h5/h6 rules didn't match
   the actual markup (name was a bare <h5>, which fell through to an
   unrelated ".tabs-content h5" rule sized for a totally different
   element and added a stray 38px gap under the name), and its rating
   <li>s were float:left with nothing clearing them — so the star row
   and the review paragraph after it rendered on the same line. */
.product-details .product-discription .tabs-content .review-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
}
.review-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7f3ec;
    color: #c9a227;
    font-size: 16px;
    font-weight: 700;
}
.review-avatar-image {
    object-fit: cover;
}
.review-body {
    flex: 1;
    min-width: 0;
}
.review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.review-author {
    font-size: 15px;
    font-weight: 600;
    color: #1b1b1b;
}
.product-details .product-discription .tabs-content .review-inner .rating {
    margin: 6px 0 10px;
}
.product-details .product-discription .tabs-content .rating li {
    float: none;
    display: inline-block;
    margin-right: 2px;
}
.review-body .rating .fas.fa-star {
    color: #c9a227;
}
.review-body .rating .far.fa-star {
    color: #ddd;
}
.review-body > p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}
/* Store's public response to a review (written from admin → Reviews). */
.review-reply {
    margin-top: 14px;
    padding: 12px 16px;
    border-left: 3px solid #c9a227;
    background: #faf7f1;
    border-radius: 0 4px 4px 0;
}
.review-reply-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.review-reply-author {
    font-size: 13px;
    font-weight: 600;
    color: #1b1b1b;
}
.review-reply p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
    white-space: pre-line;
}

/* .shop-section has no top padding by default (it only ever needed
   padding-bottom, sitting right under the homepage's own top-category
   section) — but the wishlist page reuses it directly under the plain
   .page-title banner, which left the two touching with no breathing
   room. Scoped to that adjacency only, so the homepage layout is
   untouched. */
.page-title + .shop-section {
    padding-top: 100px;
}

/* Contact page — Castro's shipped contact markup assumed multiple offices
   and a Google-Maps-API-key embed we don't have; this is a small
   independent layout built around the single real SiteInfo record instead
   (a plain maps.google.com/output=embed iframe needs no API key). */
.contact-page {
    position: relative;
    padding: 100px 0;
}
.contact-page .contact-info-block .sec-title {
    text-align: left;
    margin-bottom: 35px;
}
.contact-page .contact-info-block .sec-title h2 {
    font-size: 30px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 12px;
}
.contact-page .contact-info-block .sec-title p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}
.contact-page .info-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
.contact-page .info-list li {
    position: relative;
    padding: 0 0 20px 45px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.contact-page .info-list li:last-child {
    border-bottom: none;
}
.contact-page .info-list li i {
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 24px;
    color: #c9a227;
}
.contact-page .info-list li span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 4px;
}
.contact-page .info-list li a,
.contact-page .info-list li em {
    color: #222;
    font-size: 15px;
    font-style: normal;
}
.contact-page .info-list li a:hover {
    color: #c9a227;
}
.contact-page .social-links {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-page .social-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e5e5e5;
    color: #222;
    transition: all 300ms ease;
}
.contact-page .social-links li a:hover {
    background: #c9a227;
    border-color: #c9a227;
    color: #fff;
}

.contact-page .default-form .form-group {
    margin-bottom: 22px;
}
.contact-page .default-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.contact-page .default-form input,
.contact-page .default-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    font-size: 14px;
    color: #222;
}

.map-section .map-outer {
    position: relative;
    line-height: 0;
}
.map-section iframe {
    display: block;
    filter: grayscale(20%);
}

/* Story page */
.story-page {
    position: relative;
    padding: 100px 0;
}
.story-page .story-intro {
    max-width: 700px;
    margin: 0 auto 60px;
}
.story-page .story-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c9a227;
    margin-bottom: 16px;
}
.story-page .story-intro h2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 38px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 20px;
}
.story-page .story-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}
.story-page .story-about {
    max-width: 760px;
    margin: 0 auto 60px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}
.story-page .story-cta {
    margin-top: 10px;
}

/* Cart page — reuses Castro's .cart-section/.cart-table almost as-is,
   deliberately NOT the touchspin-coupled .item-quantity (same
   plugin-lifecycle issue as elsewhere); own small quantity-box instead. */
.cart-section .empty-cart {
    text-align: center;
    padding: 60px 0;
}
.cart-section .empty-cart p {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
}
.cart-section .remove-form {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.cart-section td.qty .quantity-box {
    margin: 0 auto;
}
.cart-section .cart-total {
    margin-bottom: 30px;
}

/* Mobile/tablet cart: Castro's table is 1170px min-width, which on a
   phone left only the remove button + thumbnail visible and hid price,
   qty and total off-screen. Below 992px each row becomes a card:
       [thumb] title          [x]
       [thumb] PKR 1,900 each
       [thumb] [- 1 +]    PKR 1,900
   td.prod-column and its .column-box use display:contents so the remove
   button, thumbnail and title become grid items of the row itself. */
@media (max-width: 991px) {
    .cart-section .table-outer {
        overflow: visible;
    }
    .cart-section .cart-table {
        min-width: 0;
        display: block;
    }
    .cart-section .cart-table thead {
        display: none;
    }
    .cart-section .cart-table tbody {
        display: block;
        border-top: 1px solid #e6e6e6;
    }
    .cart-section .cart-table tbody tr {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb title remove"
            "thumb price price"
            "thumb qty   total";
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
        padding: 18px 0;
    }
    .cart-section .cart-table tbody tr td.prod-column,
    .cart-section .cart-table tbody tr .prod-column .column-box {
        display: contents;
    }
    .cart-section .cart-table tbody tr td:last-child {
        display: none;
    }
    .cart-section .cart-table tbody tr .prod-column .column-box .prod-thumb {
        grid-area: thumb;
        position: static;
        width: 84px;
        height: 104px;
        margin: 0;
        background: #f7f3ec;
        align-self: start;
    }
    .cart-section .cart-table tbody tr .prod-column .column-box .prod-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .cart-section .cart-table tbody tr .prod-column .column-box .title {
        grid-area: title;
        padding-left: 0;
        min-width: 0;
    }
    .cart-section .cart-table .prod-title {
        display: block;
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .cart-section .remove-form {
        grid-area: remove;
        position: static;
        transform: none;
        align-self: start;
    }
    .cart-section .cart-table tbody tr .prod-column .column-box .remove-btn {
        position: static;
        transform: none;
        width: 30px;
        height: 30px;
        line-height: 28px;
        font-size: 12px;
        background: #fff;
    }
    .cart-section .cart-table tbody tr td.price {
        grid-area: price;
        padding: 0;
        text-align: left;
        font-size: 13px;
        color: #888;
    }
    .cart-section .cart-table tbody tr td.price::after {
        content: ' each';
    }
    .cart-section .cart-table tbody tr td.qty {
        grid-area: qty;
        padding: 0;
    }
    .cart-section td.qty .quantity-box {
        margin: 0;
        width: max-content;
        height: 38px;
    }
    .cart-section td.qty .quantity-box button {
        width: 32px;
    }
    .cart-section td.qty .quantity-box input {
        width: 38px;
    }
    .cart-section .cart-table tbody tr .sub-total {
        grid-area: total;
        padding: 0;
        text-align: right;
        font-weight: 600;
        white-space: nowrap;
    }
    .cart-section .cart-total {
        margin-top: 30px;
    }
}
.cart-section .total-cart-box .theme-btn-two {
    text-align: center;
}
.cart-section .continue-shopping a {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.cart-section .continue-shopping a:hover {
    color: #c9a227;
}

/* Checkout page — reuses Castro's .checkout-section almost as-is */
.checkout-section .payment-info {
    margin-top: 30px;
}
.checkout-section .payment-info .payment-inner .btn-box .theme-btn-two {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
}
.checkout-section .payment-info .payment-inner .option-block p {
    padding-left: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}
/* Castro's billing-form only ever styled text/email inputs — the phone
   field (type="tel") fell through with no width/height/border at all,
   rendering as a tiny native-sized box instead of filling its column. */
.checkout-section .billing-form .form-group input[type='tel'] {
    position: relative;
    display: block;
    width: 100%;
    height: 45px;
    border: 1px solid #e6e6e6;
    font-size: 15px;
    color: #848484;
    padding: 10px 15px;
    transition: all 500ms ease;
}
/* Order summary card — a clean, purpose-built replacement for Castro's
   float-based .order-list (whose columns cramped and wrapped awkwardly
   once product names ran long), styled closer to a modern checkout
   (thumbnail + qty badge, a real discount-code box, then a clear
   subtotal/discount/delivery/total breakdown). */
.order-summary {
    display: block;
    margin-bottom: 40px;
    border: 1px solid #eee;
}
.order-summary-products {
    list-style: none;
    margin: 0;
    padding: 20px 30px;
}
.order-summary-products li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.order-summary-products li:last-child {
    border-bottom: none;
}
.order-summary-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
}
.order-summary-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f7f3ec;
    padding: 6px;
    border-radius: 4px;
}
.order-summary-thumb .qty-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.order-summary-details {
    flex: 1;
    min-width: 0;
}
.order-summary-details h6 {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin: 0 0 3px;
}
.order-summary-details .unit-price {
    font-size: 12px;
    color: #888;
}
.order-summary-products li .line-total {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.order-summary-coupon {
    padding: 20px 30px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.coupon-input-row {
    display: flex;
    gap: 10px;
}
.coupon-input-row input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1px solid #e6e6e6;
    padding: 0 14px;
    font-size: 14px;
    color: #222;
}
.coupon-input-row input:disabled {
    background: #f7f3ec;
    color: #555;
}
.coupon-input-row button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    border: 1px solid #222;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 250ms ease;
}
.coupon-input-row button:hover {
    background: #c9a227;
    border-color: #c9a227;
}
#couponRemoveBtn {
    background: #fff;
    color: #d0342c;
    border-color: #d0342c;
}
#couponRemoveBtn:hover {
    background: #d0342c;
    color: #fff;
}
.coupon-message {
    margin: 10px 0 0;
    font-size: 12px;
    color: #2e9e4f;
}
.coupon-message.is-error {
    color: #d0342c;
}
.coupon-message:empty {
    display: none;
}

.order-summary-totals {
    list-style: none;
    margin: 0;
    padding: 20px 30px;
}
.order-summary-totals li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #555;
}
.order-summary-totals li.discount-row span:last-child {
    color: #2e9e4f;
    font-weight: 600;
}
.order-summary-totals li.total-row {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    font-size: 17px;
    font-weight: 700;
    color: #1b1b1b;
}
.order-summary .delivery-estimate {
    margin: 0;
    padding: 0 30px 20px;
    font-size: 13px;
    color: #888;
}
.order-summary .delivery-estimate i {
    color: #c9a227;
    margin-right: 6px;
}

/* Thank-you page */
.thank-you-section {
    padding: 100px 0;
}
.thank-you-section .thank-you-box {
    max-width: 600px;
    margin: 0 auto;
}
.thank-you-section .check-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #eaf7ee;
    color: #2e9e4f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.thank-you-section h2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 15px;
}
.thank-you-section > .auto-container > .thank-you-box > p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 35px;
}
.thank-you-section .order-summary-card {
    background: #f7f3ec;
    padding: 25px 30px;
    text-align: left;
    margin-bottom: 35px;
}
.thank-you-section .order-summary-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.thank-you-section .order-summary-card li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}
.thank-you-section .order-summary-card li strong {
    color: #1b1b1b;
    font-weight: 600;
}
.thank-you-section .order-summary-card li strong.status {
    color: #c9a227;
}
.thank-you-section .order-items-list {
    text-align: left;
    margin-bottom: 40px;
}
.thank-you-section .order-items-list h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 15px;
    text-align: center;
}
.thank-you-section .item-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}
.thank-you-section .thank-you-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}
.thank-you-section .continue-link {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.thank-you-section .continue-link:hover {
    color: #c9a227;
}

/* Track order page */
.track-order-section {
    padding: 100px 0;
}
.track-order-section .track-intro {
    max-width: 600px;
    margin: 0 auto 40px;
}
.track-order-section .track-intro p {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
}
.track-order-section .track-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.track-order-section .track-form input {
    flex: 1;
    min-width: 200px;
    height: 48px;
    border: 1px solid #e5e5e5;
    padding: 10px 16px;
    font-size: 14px;
}
.track-order-section .centred-box {
    max-width: 600px;
    margin: 0 auto 30px;
    text-align: center;
}
.track-order-section .track-not-found {
    max-width: 500px;
    margin: 40px auto;
    padding: 35px;
    border: 1px solid #f8d3cf;
    background: #fdecea;
}
.track-order-section .track-not-found .headline {
    font-size: 18px;
    font-weight: 600;
    color: #d0342c;
    margin-bottom: 8px;
}
.track-order-section .track-not-found p:not(.headline) {
    color: #a33;
    font-size: 14px;
}

.order-status-card {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #eee;
    padding: 35px;
}
.order-status-card .card-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.order-status-card .card-header span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 4px;
}
.order-status-card .card-header p {
    font-size: 18px;
    font-weight: 600;
    color: #c9a227;
    margin: 0;
}
.order-status-card .card-header .pull-right p {
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.order-status-card .cancelled-box,
.order-status-card .pending-box {
    padding: 25px 0;
}
.order-status-card .cancel-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fdecea;
    color: #d0342c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.order-status-card .pending-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fbf3de;
    color: #c9a227;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.order-status-card .headline {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
}

.progress-track {
    position: relative;
    padding: 40px 10px 10px;
}
.progress-track .track-line {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 60px;
    height: 3px;
    background: #eee;
    border-radius: 3px;
}
.progress-track .track-line-fill {
    height: 100%;
    background: #c9a227;
    border-radius: 3px;
    transition: width 700ms ease;
}
.progress-track .stage-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}
.progress-track .stage-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.progress-track .stage-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    color: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.progress-track li.reached .stage-dot {
    border-color: #c9a227;
    background: #c9a227;
    color: #fff;
}
.progress-track .stage-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    text-align: center;
}
.progress-track li.reached .stage-label {
    color: #c9a227;
}

.order-status-card .info-row {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 30px;
}
.order-status-card .info-row h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 10px;
}
.order-status-card .info-row p {
    font-size: 14px;
    color: #333;
    margin: 0 0 3px;
}
.order-status-card .info-row p.muted {
    color: #888;
}

.order-status-card .items-block {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 30px;
}
.order-status-card .items-block h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 15px;
}
.order-status-card .item-row {
    border: 1px solid #eee;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.order-status-card .item-row-main {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
}
.order-status-card .review-done {
    margin: 10px 0 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2e9e4f;
}
.order-status-card .review-toggle {
    margin-top: 12px;
}
/* A real <button> (not <details>/<summary>) so it can't be mistaken for
   plain text, and so nothing about opening it depends on layout tricks
   that assume a native disclosure widget. */
.order-status-card .review-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #c9a227;
    color: #c9a227;
    padding: 9px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}
.order-status-card .review-toggle-btn:hover {
    background: #c9a227;
    color: #fff;
}
.order-status-card .inline-review-form {
    margin-top: 18px;
    display: none;
}
.order-status-card .inline-review-form.is-open {
    display: block;
}
.order-status-card .inline-review-form input[type="text"],
.order-status-card .inline-review-form input[type="email"],
.order-status-card .inline-review-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
    font-family: inherit;
}
.order-status-card .inline-review-form .form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.order-status-card .inline-review-form .form-row > * {
    flex: 1 1 220px;
}
.order-status-card .inline-review-form label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 6px;
}
.order-status-card .inline-review-form .theme-btn-two {
    border: none;
    cursor: pointer;
}

/* Star rating input — replaces the native <select>, which every
   `<select>` on the site gets auto-wrapped into a niceSelect widget for
   (see script.js). niceSelect measures the element's width at page load;
   inside a form that starts hidden (closed <details>/display:none), it
   measures zero and renders a tiny, broken dropdown that a real click
   can't reliably operate — which was the actual cause of "submit does
   nothing" (an unpickable rating left the field empty, and the required
   check silently blocked the submit). Plain buttons have no such
   dependency on being visible+measured at load time. */
.star-rating-input-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.star-rating-input-star {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #ddd;
}
.star-rating-input-star.is-filled,
.star-rating-input-star.is-hovered {
    color: #c9a227;
}
.review-dropzone {
    margin-bottom: 14px;
    border: 2px dashed #ddd;
    background: #fafafa;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}
.review-dropzone.is-dragover {
    border-color: #c9a227;
    background: #f7f3ec;
}
.review-dropzone-prompt i {
    font-size: 26px;
    color: #c9a227;
    margin-bottom: 8px;
    display: block;
}
.review-dropzone-prompt p {
    margin: 0 0 4px;
    font-size: 13px;
    color: #444;
}
.review-dropzone-browse {
    color: #c9a227;
    text-decoration: underline;
}
.review-dropzone-prompt .muted {
    font-size: 11px;
    color: #999;
}
.review-dropzone-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.review-dropzone-previews:empty {
    margin-top: 0;
}
.review-dropzone-preview {
    position: relative;
    width: 90px;
    text-align: center;
    cursor: default;
}
.review-dropzone-preview-thumb {
    width: 90px;
    height: 90px;
    background: #fff;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.review-dropzone-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-dropzone-preview-thumb i {
    font-size: 26px;
    color: #999;
}
.review-dropzone-preview-status {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-dropzone-preview-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    border: 2px solid #fff;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.order-status-card .history-block {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 30px;
}
.order-status-card .history-block h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 12px;
}
.order-status-card .history-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.order-status-card .history-block li {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    padding: 4px 0;
}

/* ---------------------------------------------------------------------
   Type-scale + button normalization pass — headings had drifted to
   wildly different sizes depending on which page/section they came
   from (page-title 46px, sec-title 40px, hero 46px, banner-carousel
   70px, story 38px, contact 30px...). Bringing them down to one
   consistent, smaller scale so the whole site reads as one system.
   --------------------------------------------------------------------- */
.page-title {
    padding: 55px 0 50px 0;
}
.page-title .content-box h1 {
    font-size: 30px;
    line-height: 36px;
}
.sec-title h2 {
    font-size: 28px;
    line-height: 36px;
}
.sec-title p {
    font-size: 14px;
}
.safa-hero__content h1 {
    font-size: 32px;
}
.safa-hero__content h3 {
    font-size: 13px;
}
.safa-hero__content p {
    font-size: 15px;
}
.banner-carousel .content-box {
    min-height: 340px;
    padding: 70px 0 60px 0;
}
.banner-carousel .content-box h1 {
    font-size: 32px;
    line-height: 38px;
}
.banner-carousel .content-box h3 {
    font-size: 12px;
    margin-bottom: 12px;
}
.banner-carousel .content-box p {
    font-size: 14px;
    margin-bottom: 20px;
}
.banner-carousel .active .content-box .btn-box .theme-btn-one {
    padding: 11px 26px;
}

/* Plain centered dots instead of Castro's stock "01 / 02 / 03" counter
   pagination (.owl-dot:before/:after render the digits and slash via
   CSS counters, with the real dot span hidden) — and no prev/next
   arrows, since owl-carousel already supports drag/swipe navigation. */
.banner-style-one .owl-dots {
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
}
.banner-style-one .owl-dots .owl-dot {
    margin: 0 5px;
}
.banner-style-one .owl-dots .owl-dot:before,
.banner-style-one .owl-dots .owl-dot:after {
    content: none;
}
.banner-style-one .owl-dots .owl-dot span {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 50%;
    background: rgba(34, 34, 34, 0.25);
    transition: background 300ms ease, transform 300ms ease;
}
.banner-style-one .owl-dots .owl-dot.active span {
    background: #c9a227;
    transform: scale(1.2);
}
.banner-style-one .banner-carousel .owl-nav {
    display: none;
}

/* Shop-by-category — a real owl-carousel (.four-item-carousel, already
   auto-initialized by script.js) instead of a static 4-up grid, so it
   still works once there are more than 4 (or fewer than 4) parent
   categories: HomeController no longer requires a category to already
   have active products, it just excludes sub-categories
   (whereNull('parent_id')), so a category with 0 products (e.g. "Men"
   before it has stock) still gets its slide instead of silently
   disappearing from the row. No nav arrows or dots — script.js's own
   .four-item-carousel init hardcodes nav:true (and owl always builds
   the .owl-dots markup regardless), so both are force-hidden here the
   same way the homepage gallery carousel's are. */
.topcategory-section .owl-stage-outer {
    padding: 10px 0 20px;
}
.topcategory-section .owl-nav,
.topcategory-section .owl-dots {
    display: none !important;
}

/* Optional per-banner background photo (admin "Background Image" field) —
   a soft overlay keeps the headline/eyebrow/button legible over any
   photo, without affecting slides that don't set one. */
.banner-carousel .slide-item.has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.banner-carousel .slide-item.has-bg:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(247, 243, 236, 0.45);
    z-index: 0;
}
.banner-carousel .slide-item.has-bg .auto-container {
    position: relative;
    z-index: 1;
}
.story-page .story-intro h2 {
    font-size: 27px;
}
.contact-page .contact-info-block .sec-title h2 {
    font-size: 24px;
}
.thank-you-section h2 {
    font-size: 26px;
}

/* Buttons — a touch smaller and more even across the two variants. */
.theme-btn-one,
.theme-btn-two {
    font-size: 13px;
    padding: 11px 28px;
}
.cart-section .cart-total .total-cart-box .theme-btn-two,
.checkout-section .payment-info .payment-inner .btn-box .theme-btn-two,
.product-details-content .product-info .othre-options .btn-box .theme-btn-two,
.product-details-content .product-info .othre-options .btn-box .stock-status {
    padding: 12px 28px;
}

/* Icons — nav dropdown carets, quick-action icons, and section icon
   boxes were all slightly different sizes for no real reason. */
.shop-block-one .inner-box .image-box .quick-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.shop-block-one .inner-box .image-box .wishlist-icon-btn {
    top: 15px;
}
.service-block-one .inner-box .icon-box {
    font-size: 40px;
    line-height: 40px;
}

/* ---------------------------------------------------------------------
   Mobile menu — open from the LEFT (matching the hamburger icon's side)
   instead of Castro's stock right-hand drawer, no brand wordmark inside
   (removed from the markup; the drawer just starts with the nav), and a
   more premium look for the links themselves.
   --------------------------------------------------------------------- */
.mobile-menu {
    left: 0;
    right: auto;
    padding-right: 0;
    padding-left: 30px;
}
.mobile-menu .menu-backdrop {
    left: 0;
    right: auto;
    transform: translateX(-101%);
}
.mobile-menu-visible .mobile-menu .menu-backdrop {
    transform: translateX(0%);
}
.mobile-menu .menu-box {
    left: 0;
    transform: translateX(-101%);
}
.mobile-menu-visible .mobile-menu .menu-box {
    transform: translateX(0%);
}
.mobile-menu .menu-outer {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .navigation li > a {
    display: flex;
    align-items: center;
    padding: 14px 30px;
    font-size: 13px;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li > a:hover {
    color: #c9a227;
}
.mobile-menu .navigation li > a:before {
    border-left-color: #c9a227;
}
.mobile-menu .contact-info {
    padding: 30px 30px 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}
.mobile-menu .contact-info h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #c9a227;
}

/* Mobile header — logo centered between the (left) menu toggle and the
   (right) search/wishlist/cart icons, none of them overlapping. Castro's
   own responsive.css only centers the logo for its unused .style-two
   header variant, leaving this plain header's logo to wrap/overlap the
   icon row between ~500-991px. */
@media (max-width: 991px) {
    .header-lower .outer-box {
        position: relative;
        min-height: 64px;
    }
    .header-lower .outer-box .menu-area {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .main-header .menu-right-content {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    .main-header .logo-box {
        width: 100%;
        text-align: center;
        padding: 14px 100px;
    }
    .main-header .logo-box .logo-text {
        font-size: 13px;
        letter-spacing: 0.08em;
    }
    .main-header .menu-right-content li.shop-wishlist {
        display: none;
    }
    /* The account icon's job (open the drawer) moved to
       .mobile-nav-toggler below, in the slot the hamburger used to
       occupy — so its old spot among the right-hand icons is hidden
       here, leaving just Search + Cart on the right. */
    .main-header .menu-right-content li.shop-account {
        display: none;
    }
    /* Repurposed from a 3-bar hamburger into the account/user icon —
       same class, same click binding (script.js), same position
       (.menu-area, left:0 above), just a different glyph and a
       touch-friendly (44px) circular hit target instead of 3 bars. */
    .menu-area .mobile-nav-toggler {
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-top: 0;
        padding: 0;
        border-radius: 50%;
        border-color: #e5e5e5;
        color: #222;
        font-size: 18px;
        line-height: 1;
    }
    .menu-area .mobile-nav-toggler img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
}
@media (max-width: 360px) {
    .main-header .logo-box {
        padding: 14px 78px;
    }
    .main-header .logo-box .logo-text {
        font-size: 13px;
        letter-spacing: 0.06em;
    }
}

/* Header search — an inline field that grows out from the search icon's
   own spot (right edge anchored, width animates 0 -> full so it reads as
   sliding right-to-left) instead of Castro's stock full-screen
   #search-popup modal (removed from the markup entirely) or a dropdown
   panel floating below the icon. On mobile, the icon instead navigates
   straight to the dedicated /search page (see the click handler), so
   this never opens there. */
.main-header .menu-right-content li.search-btn {
    position: relative;
}
.header-search-box {
    position: absolute;
    top: 50%;
    right: 46px;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: width 350ms ease, opacity 200ms ease, visibility 350ms ease;
    z-index: 500;
}
.header-search-box.active {
    width: 230px;
    max-width: 55vw;
    opacity: 1;
    visibility: visible;
}
/* Swap the icon out while the field is open — kept in layout (not
   display:none) so the li's box doesn't resize and shift the field's
   right-anchored position. */
.main-header .menu-right-content li.search-btn.search-open .search-toggler {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.header-search-box form {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 0 4px 0 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}
.header-search-box input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: #222;
}
.header-search-box input:focus {
    outline: none;
}
.header-search-box button[type="submit"] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.header-search-box button[type="submit"]:hover {
    background: #c9a227;
}

/* Dedicated /search page — a simple, Instagram-style search screen:
   a prominent input up top, then results (or Featured fragrances by
   default, before the visitor has typed anything). */
.search-page {
    padding: 50px 0 80px;
}
.search-page-form {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 35px;
}
.search-page-form input {
    flex: 1;
    height: 50px;
    border: 1px solid #e5e5e5;
    padding: 10px 20px;
    font-size: 15px;
    color: #222;
}
.search-page-form button {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: none;
    background: #222;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.search-page-form button:hover {
    background: #c9a227;
}
.search-page-heading {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 30px;
}
.search-page-empty {
    text-align: center;
    font-size: 15px;
    color: #666;
    padding: 30px 0;
}

/* Mobile drawer / "Home Side Drawer" — a bit narrower than Castro's
   stock 300px. Three sections: 1) account identity up top (bigger,
   more prominent avatar + email/phone), 2) the main .navigation list
   (script.js no longer clones the desktop nav into this — see
   scrollbar.js's mobileMenuContent — the full item list is authored
   directly in the drawer markup instead, so it can interleave
   account-only links like Wishlist/Cart/Order History in the exact
   requested order), 3) a small footer row kept visually separate by
   its own top border, the same way .contact-info used to sit at the
   bottom of this drawer. */
.mobile-menu {
    width: 260px;
}
.mobile-account-box {
    padding: 50px 30px 20px;
}
.mobile-account-link {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mobile-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #c9a227;
    font-size: 24px;
    overflow: hidden;
}
.mobile-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mobile-account-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mobile-account-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-transform: uppercase;
}
.mobile-account-meta {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-menu .navigation li > a i {
    width: 18px;
    margin-right: 10px;
    font-size: 13px;
    color: #c9a227;
    text-align: center;
}
.mobile-menu-footer {
    padding: 18px 30px 30px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-footer a,
.mobile-menu-footer button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #ccc;
    text-align: left;
    cursor: pointer;
}
.mobile-menu-footer a i,
.mobile-menu-footer button i {
    width: 18px;
    margin-right: 10px;
    font-size: 13px;
    color: #c9a227;
    text-align: center;
}
.mobile-menu-footer a:hover,
.mobile-menu-footer button:hover {
    color: #c9a227;
}

/* Auth pages (login/register) */
.auth-page {
    padding: 60px 0 90px;
}
.auth-card {
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}
.auth-card h2 {
    font-size: 26px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 8px;
}
.auth-card > p {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}
.auth-card .default-form {
    text-align: left;
}
.auth-card .form-group {
    margin-bottom: 20px;
}
.auth-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.auth-card .form-group input {
    width: 100%;
    height: 46px;
    border: 1px solid #e5e5e5;
    padding: 10px 16px;
    font-size: 14px;
}
.auth-card .form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #999;
}
.auth-card .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    font-weight: 400;
    font-size: 13px;
    color: #555;
}
.auth-card .checkbox-group input {
    width: auto;
    height: auto;
}
.auth-card .theme-btn-one {
    width: 100%;
    text-align: center;
    cursor: pointer;
}
.auth-switch {
    margin-top: 25px;
    font-size: 13px;
    color: #666;
}
.auth-switch a {
    color: #c9a227;
    font-weight: 600;
}

/* Account / order-history page */
.account-page {
    padding: 50px 0 90px;
}
.account-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f7f3ec;
    color: #c9a227;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
}
.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1b1b1b;
    margin: 0 0 4px;
}
.account-header p {
    font-size: 13px;
    color: #888;
    margin: 0;
}
.account-logout {
    margin-left: auto;
}
.account-logout button {
    border: 1px solid #e5e5e5;
    background: transparent;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    cursor: pointer;
}
.account-logout button:hover {
    border-color: #c9a227;
    color: #c9a227;
}

.order-history-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.order-history-item {
    border: 1px solid #eee;
}
.order-history-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}
.order-history-row::-webkit-details-marker {
    display: none;
}
.order-history-item[open] .order-history-row {
    border-bottom: 1px solid #eee;
}
.order-history-item[open] .order-history-link {
    color: #1b1b1b;
}
.order-history-detail {
    padding: 24px 20px;
}
.order-history-detail .order-status-card {
    border: none;
    padding: 0;
    max-width: none;
    margin: 0;
}
.order-history-main {
    display: flex;
    flex-direction: column;
    min-width: 130px;
}
.order-history-main .order-id {
    font-weight: 700;
    color: #1b1b1b;
    font-size: 14px;
}
.order-history-main .order-date {
    font-size: 12px;
    color: #999;
}
.order-history-items {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    color: #666;
}
.order-history-total {
    font-weight: 600;
    color: #1b1b1b;
    font-size: 14px;
}
.status-badge {
    display: inline-block;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
}
.status-badge.status-pending { background: #fbf3de; color: #c9a227; }
.status-badge.status-processing { background: #e6f0fb; color: #2b6cb0; }
.status-badge.status-shipped { background: #e8e6fb; color: #5a4fcf; }
.status-badge.status-delivered { background: #eaf7ee; color: #2e9e4f; }
.status-badge.status-cancelled { background: #fdecea; color: #d0342c; }
.order-history-link {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #c9a227;
    margin-left: auto;
}

.account-nav {
    display: flex;
    gap: 28px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.account-nav a {
    position: relative;
    padding-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
}
.account-nav a.active,
.account-nav a:hover {
    color: #1b1b1b;
}
.account-nav a.active:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #c9a227;
}

.settings-form .settings-card {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.settings-form .settings-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1b1b1b;
    margin-bottom: 18px;
}
.settings-form .settings-hint {
    font-size: 13px;
    color: #888;
    margin: -10px 0 18px;
}
.settings-form .settings-photo-row {
    display: flex;
    align-items: center;
    gap: 20px;
}
.settings-form .account-avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 26px;
}
.settings-form .form-group {
    margin-bottom: 22px;
}
.settings-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"] {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    font-size: 14px;
    color: #222;
}

/* Homepage promo-banner strip — 3 admin-managed banners shown before
   "Shop by Category": Left and Right sit side by side, with Full
   spanning the row below them. Each is a photo with a hover-reveal
   button (its own admin-set label, "Shop" by default); any can be left
   empty from the admin side and that half/row just won't render. */
.promo-banner-strip {
    padding: 50px 0 10px;
}
.promo-banner-block {
    margin-bottom: 30px;
}
.promo-banner-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f7f3ec;
}
/* Full-width row — keeping the same 16:10 ratio at double the column
   width would make it nearly as tall as the two side banners combined;
   a wider, shorter ratio reads as a proper full-bleed strip instead. */
.promo-banner-block-full .promo-banner-card {
    aspect-ratio: 21 / 6;
}
.promo-banner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}
.promo-banner-card:hover img {
    transform: scale(1.06);
}
.promo-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 300ms ease;
}
.promo-banner-card:hover .promo-banner-overlay {
    opacity: 1;
}
.promo-banner-overlay .theme-btn-one {
    background: #fff;
    border-color: #fff;
}
.promo-banner-overlay .theme-btn-one:hover {
    background: #c9a227;
    border-color: #c9a227;
    color: #fff;
}

/* Policy pages (Privacy / Terms / Returns) + FAQ */
.policy-page {
    padding: 60px 0 90px;
}
.policy-content {
    max-width: 820px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}
.policy-empty {
    text-align: center;
    font-size: 15px;
    color: #888;
    padding: 40px 0;
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid #eee;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1b1b1b;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary i {
    flex: 0 0 auto;
    font-size: 12px;
    color: #999;
    transition: transform 300ms ease;
}
.faq-item[open] summary i {
    transform: rotate(180deg);
    color: #c9a227;
}
.faq-answer {
    padding: 0 0 22px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

/* Per-page hero banner (admin-configurable, SiteInfo::*_banner) on the
   plain .page-title strip — falls back to the flat #edf0f5 background
   from style.css when a page has no banner set. */
.page-title.has-banner {
    background: #1b1b1b;
    overflow: hidden;
}
.page-title.has-banner .pattern-layer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-title.has-banner:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.page-title.has-banner .auto-container {
    position: relative;
    z-index: 1;
}
.page-title.has-banner .content-box h1,
.page-title.has-banner .content-box .bread-crumb li {
    color: #fff;
}
.page-title.has-banner .content-box .bread-crumb li a {
    color: #fff;
}
.page-title.has-banner .content-box .bread-crumb li:before {
    color: rgba(255, 255, 255, 0.5);
}

/* Category cover images can be any aspect ratio from the admin upload;
   .image-box's own border-radius:50% only reads as a circle when the
   <img> is exactly square, so force that instead of letting a tall/wide
   photo stretch into an ellipse. */
.category-block-one .image-box img {
    height: 250px;
    object-fit: cover;
}

/* Shop sidebar "Search" — label sits beside the field instead of
   stacked above it (the .widget-title block used to take its own
   full-width row). */
.shop-sidebar .search-widget {
    display: flex;
    align-items: center;
    gap: 14px;
}
.shop-sidebar .search-widget .widget-title {
    margin-bottom: 0;
    flex: 0 0 auto;
}
.shop-sidebar .search-widget .search-form {
    flex: 1;
    min-width: 0;
}

/* "Sort by" — the template's own CSS floats the label <p>, but the
   <form> wrapping the select is a block element that doesn't sit
   beside a float, so it always dropped to the next line. Flex fixes
   the alignment regardless of the float rules. */
.shop-page-section .item-shorting .right-column .short-box {
    display: flex;
    align-items: center;
    float: none;
}
.shop-page-section .item-shorting .right-column .short-box p {
    float: none;
    margin-right: 12px;
    white-space: nowrap;
}
.shop-page-section .item-shorting .right-column .short-box form {
    display: flex;
    align-items: center;
}

/* Shop page — search bar + result count/filter-toggle row above the grid,
   replacing the old two-column (sidebar + content) layout. */
.shop-toolbar {
    margin-bottom: 30px;
}
.shop-search-form {
    display: flex;
    max-width: 480px;
    margin-bottom: 20px;
}
.shop-search-form input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid #e5e5e5;
    padding: 0 16px;
    font-size: 14px;
    color: #222;
}
.shop-search-form button {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid #222;
    background: #222;
    color: #fff;
    cursor: pointer;
    transition: background 250ms ease;
}
.shop-search-form button:hover {
    background: #c9a227;
    border-color: #c9a227;
}
.shop-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.shop-result-count {
    margin: 0;
    font-size: 14px;
    color: #666;
}
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease;
}
.filter-toggle-btn:hover {
    background: #222;
    color: #fff;
}

/* Filter drawer — slides in from the right instead of the old inline
   sidebar; holds search-independent filters (stock, sort, category,
   price) plus an Apply/Clear footer. */
.filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 1000;
}
.filter-backdrop.active {
    opacity: 1;
    visibility: visible;
}
.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 380px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 350ms ease;
    z-index: 1001;
}
.filter-drawer.active {
    transform: translateX(0);
}
.filter-drawer-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}
.filter-drawer-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1b1b1b;
}
.filter-drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: #222;
}
.filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.filter-section {
    margin-bottom: 32px;
}
.filter-section h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #1b1b1b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
/* Sort By is a plain native <select> (see the "ignore" class skipping
   jquery.nice-select on it) — nice-select otherwise swaps it for a
   widget whose own layout collapsed the gap before the next section. */
.filter-select {
    width: 100%;
    height: 44px;
    border: 1px solid #e5e5e5;
    padding: 0 12px;
    font-size: 14px;
    color: #222;
    background: #fff;
}
.filter-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}
.filter-categories li {
    margin-bottom: 10px;
}
.filter-categories li .filter-checkbox {
    margin-bottom: 0;
}
.filter-categories li.active label span {
    color: #c9a227;
    font-weight: 600;
}

/* Custom square checkbox (Categories' multi-select), gold when checked
   instead of the browser's default blue accent-color. */
.filter-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.filter-checkbox input[type="checkbox"]:checked {
    background: #c9a227;
    border-color: #c9a227;
}
.filter-checkbox input[type="checkbox"]:checked:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Availability — a single-choice radio pair (see the mousedown/click
   handler for toggling one back off), styled as the same gold-filled
   control as the checkboxes above but round. */
.filter-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.filter-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.filter-radio input[type="radio"]:checked {
    border-color: #c9a227;
}
.filter-radio input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c9a227;
}

.filter-drawer .range-slider {
    padding: 0 4px;
}
.filter-drawer .range-slider .ui-slider-range {
    background: #c9a227;
}
.filter-drawer .range-slider .ui-state-default {
    background: #c9a227;
}
.price-range-values {
    margin-top: 16px;
    font-size: 13px;
    color: #555;
}
.filter-drawer-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #eee;
    flex: 0 0 auto;
}
.filter-clear-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 18px;
    border: 1px solid #dc3545;
    border-radius: 2px;
    background: #fff;
    color: #dc3545;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease;
}
.filter-clear-btn:hover {
    background: #dc3545;
    color: #fff;
}
.filter-apply-btn {
    flex: 1;
    height: 48px;
    border: 1px solid #222;
    border-radius: 2px;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 250ms ease, border-color 250ms ease;
}
.filter-apply-btn:hover {
    background: #c9a227;
    border-color: #c9a227;
}

/* Homepage gallery section — admin-managed photos/videos (Site Info >
   Gallery), shown right before the footer. Same small square cards the
   old static grid used (not one giant full-width slide), just moving
   through an auto-looping owl-carousel now instead of sitting in a
   fixed CSS grid — several cards per view, with no nav arrows.
   owl-carousel only gets initialized (see the @if in
   home/index.blade.php) once there's more than one item; a single item
   just renders here as a plain, non-sliding card. */
.gallery-section {
    padding: 100px 0;
}
.gallery-slide {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f7f3ec;
}
.gallery-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.gallery-slide img,
.gallery-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.gallery-slide:hover img {
    transform: scale(1.06);
}
/* owl-carousel still builds its .owl-nav (literal "prev"/"next" text
   content) and .owl-dots markup even with nav:false/dots:false — it
   just marks the container "disabled" rather than not rendering it,
   and this vendor CSS only ever styled that class for the old v1
   .owl-controls-wrapped markup, so v2's plain .owl-nav.disabled never
   matched anything and stayed visible. No arrows/dots on this carousel
   at all, so hide both outright. */
.gallery-carousel .owl-nav,
.gallery-carousel .owl-dots {
    display: none !important;
}
@media (max-width: 767px) {
    .gallery-section {
        padding: 60px 0;
    }
}

/* Product detail short description — HTML from the admin CKEditor, shown
   with its formatting (the theme resets list styles globally). */
.product-details-content .product-info .short-description p {
    margin-bottom: 10px;
}
.product-details-content .product-info .short-description ul,
.product-details-content .product-info .short-description ol {
    padding-left: 20px;
    margin-bottom: 10px;
}
.product-details-content .product-info .short-description ul li {
    list-style: disc;
}
.product-details-content .product-info .short-description ol li {
    list-style: decimal;
}
.product-details-content .product-info .short-description strong,
.product-details-content .product-info .short-description b {
    font-weight: 600;
    color: #222;
}
.product-details-content .product-info .short-description a {
    text-decoration: underline;
}
.product-details-content .product-info .short-description > :last-child {
    margin-bottom: 0;
}

/* Our Story — admin-managed alternating sections (Admin > Our Story).
   Odd: text left / image right. Even (--reverse): image left / text right.
   Image frame is 4:3 — keep in sync with config/media.php 'story_section'. */
.story-page .story-sections {
    margin: 20px 0 90px;
}
.story-page .story-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    margin-bottom: 90px;
}
.story-page .story-section:last-child {
    margin-bottom: 0;
}
.story-page .story-section--reverse .story-section__content {
    order: 2;
}
/* Keep the image hugging the centre line on both layouts. */
.story-page .story-section--reverse .story-section__media {
    justify-self: end;
}
.story-page .story-section__content h3 {
    font-family: "Josefin Sans", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #1b1b1b;
    margin-bottom: 20px;
}
.story-page .story-section__text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}
.story-page .story-section__text p {
    margin-bottom: 14px;
}
.story-page .story-section__text ul,
.story-page .story-section__text ol {
    padding-left: 20px;
    margin-bottom: 14px;
}
.story-page .story-section__text ul li { list-style: disc; }
.story-page .story-section__text ol li { list-style: decimal; }
.story-page .story-section__text > :last-child {
    margin-bottom: 0;
}
.story-page .story-section__media {
    position: relative;
    width: 100%;
    max-width: 560px; /* 560 × 420 frame */
    justify-self: start;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f7f3ec;
}
.story-page .story-section__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 800ms ease;
}
.story-page .story-section__image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.story-page .story-section__media:hover img {
    transform: scale(1.04);
}
/* Soft dark veil on hover so the button reads over any photo. */
.story-page .story-section__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.25);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
    z-index: 1;
}
/* Button: centred on the image, revealed on hover (or keyboard focus). */
.story-page .story-section__cta {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    background: #fff;
    border-color: #fff;
    color: #1b1b1b;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% + 12px));
    transition: opacity 400ms ease, transform 400ms ease, visibility 400ms;
}
.story-page .story-section__media:has(.story-section__cta):hover::after,
.story-page .story-section__media:focus-within::after {
    opacity: 1;
}
.story-page .story-section__media:hover .story-section__cta,
.story-page .story-section__cta:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}
.story-page .story-section__cta:hover {
    color: #fff;
}
/* Touch screens have no hover — keep the button visible there. */
@media (hover: none) {
    .story-page .story-section__cta {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
    }
}
@media (max-width: 991px) {
    .story-page .story-section {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 60px;
    }
    /* Image always first on mobile, whichever side it's on at desktop. */
    .story-page .story-section__media,
    .story-page .story-section--reverse .story-section__media {
        order: -1;
        justify-self: center;
    }
    .story-page .story-section--reverse .story-section__content {
        order: 0;
    }
    .story-page .story-section__content h3 {
        font-size: 26px;
    }
}