/* ============================================================
Arabiva — Black / White / Copper theme layer (single layer)
Styles the ORIGINAL Journal3 header, footer and product cards.
Pure CSS: no JS injection, no display:none on theme elements,
no forced direction, no font-family overrides. RTL-safe
(logical properties + html[dir] variants).
Palette:
black #111111 white #ffffff
copper #b87333 copper-light #d9985f copper-deep #8c5a28
line #e8e8e8 muted #9a9a9a
NOTE: the active header on ALL viewports is Journal's
.mobile-header (site setting) — style it first; the classic
.top-bar/.mid-bar rules below it are kept in case the desktop
header ever gets enabled.
============================================================ */
/* ================= HEADER (active: .mobile-header) ================ */
/* --- Top strip: black, quiet, precise ----------------------------- */
.mobile-top-bar {
background: #111111 !important;
}
.mobile-top-bar .links-text,
.mobile-top-bar a,
.mobile-top-bar .top-menu > .j-menu > .menu-item > a,
.mobile-top-bar .language-currency a,
.mobile-top-bar .dropdown-toggle {
color: #f2f2f2 !important;
font-size: 12px;
letter-spacing: .04em;
transition: color .2s ease;
}
.mobile-top-bar a:hover,
.mobile-top-bar a:hover .links-text,
.mobile-top-bar .dropdown-toggle:hover {
color: #d9985f !important;
}
/* --- Main bar: white, hairline base, soft sticky shadow ----------- */
header.header-compact {
background: #ffffff !important;
box-shadow: 0 2px 14px rgba(17, 17, 17, .06);
}
.mobile-bar {
background: #ffffff !important;
border-bottom: 1px solid #e8e8e8;
}
.mobile-bar-group a,
.mobile-bar-group button,
.mobile-bar .menu-trigger,
.mobile-bar .search-trigger,
.mobile-bar .cart-heading {
color: #111111 !important;
transition: color .2s ease;
}
.mobile-bar-group a:hover,
.mobile-bar-group button:hover,
.mobile-bar .cart-heading:hover {
color: #b87333 !important;
}
.mobile-bar .count-badge,
.header .count-badge,
#cart .count-badge {
background: #b87333 !important;
color: #ffffff !important;
}
/* --- Search dropdown: clean white panel, copper focus ------------- */
.header-search {
background: #ffffff;
}
.header-search input {
border-color: #e8e8e8 !important;
color: #111111 !important;
}
.header-search input:focus {
border-color: #b87333 !important;
box-shadow: 0 0 0 2px rgba(184, 115, 51, .15) !important;
}
.header-search .search-button {
color: #111111;
}
.header-search .search-button:hover {
color: #b87333;
}
/* --- Off-canvas menu: white, black type, copper active ------------ */
.mobile-main-menu-container {
background: #ffffff !important;
}
.mobile-main-menu-container a,
.mobile-main-menu-container .links-text {
color: #111111;
transition: color .2s ease;
}
.mobile-main-menu-container a:hover,
.mobile-main-menu-container a:hover .links-text,
.mobile-main-menu-container .menu-item.active > a {
color: #b87333;
}
.mobile-wrapper-header {
background: #111111 !important;
color: #ffffff !important;
}
.mobile-wrapper-header span {
color: #ffffff !important;
letter-spacing: .06em;
text-transform: uppercase;
}
/* --- Classic desktop header (kept for future enable) -------------- */
.top-bar {
background: #111111 !important;
}
.top-bar a,
.top-bar .links-text,
.top-bar .top-menu > .j-menu > .menu-item > a {
color: #f2f2f2 !important;
}
.top-bar a:hover,
.top-bar .top-menu > .j-menu > .menu-item > a:hover {
color: #d9985f !important;
}
.header .main-menu > .j-menu > .menu-item > a,
.header .main-menu > .j-menu > .menu-item > a .links-text {
color: #111111;
transition: color .2s ease;
}
.header .main-menu > .j-menu > .menu-item > a:hover,
.header .main-menu > .j-menu > .menu-item > a:hover .links-text,
.header .main-menu > .j-menu > .menu-item.active > a {
color: #b87333;
}
/* ======================== FOOTER ================================== */
footer {
background: #111111 !important;
color: #d6d6d6;
}
/* Column / module titles: white caps with copper accent bar */
footer .title,
footer .module-title,
footer h2, footer h3, footer h4, footer h5 {
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: .08em;
position: relative;
padding-bottom: 12px;
}
footer .module-title::after,
footer .title::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 36px;
height: 2px;
background: #b87333;
}
/* Journal centers the newsletter title — keep its accent centered */
footer .module-newsletter .module-title::after {
inset-inline-start: 50%;
transform: translateX(-50%);
}
/* Body text */
footer p, footer li, footer span:not(.count-badge),
footer .newsletter-text {
color: #b5b5b5;
}
/* Links: quiet gray, copper on hover with a gentle slide */
footer a,
footer a .links-text {
color: #c9c9c9 !important;
transition: color .2s ease, padding-inline-start .2s ease;
}
footer a:hover,
footer a:hover .links-text {
color: #d9985f !important;
}
footer .module-catalog a:hover,
footer .j-menu a:hover {
padding-inline-start: 4px;
}
/* Social / icon menus */
footer .icons-menu-item a {
color: #c9c9c9 !important;
}
footer .icons-menu-item a:hover {
color: #d9985f !important;
}
/* Newsletter form: dark field, copper ring + button */
footer .module-newsletter .newsletter-form input.form-control,
footer .newsletter-form input,
footer input[type="text"], footer input[type="email"] {
background: #1c1c1c !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
color: #ffffff !important;
}
footer .module-newsletter .newsletter-form input.form-control:focus,
footer .newsletter-form input:focus,
footer input[type="text"]:focus, footer input[type="email"]:focus {
border-color: #b87333 !important;
box-shadow: 0 0 0 2px rgba(184, 115, 51, .2) !important;
}
footer input::placeholder {
color: #9a9a9a !important;
}
footer .module-newsletter .newsletter-form .input-group button,
footer .newsletter-form button,
footer button[type="submit"],
footer .btn.btn-primary {
background: #b87333 !important;
border-color: #b87333 !important;
color: #ffffff !important;
transition: background .2s ease;
}
footer .module-newsletter .newsletter-form .input-group button:hover,
footer .newsletter-form button:hover,
footer button[type="submit"]:hover,
footer .btn.btn-primary:hover {
background: #8c5a28 !important;
border-color: #8c5a28 !important;
}
/* Inner rows/modules must not paint over the black canvas
(Journal color-schemes give some footer rows a light background) */
footer .row-bg,
footer .col-bg,
footer .grid-row::before,
footer .grid-row::after,
footer .grid-rows::before,
footer .grid-cols::before,
footer .grid-col::before,
footer .grid-item::before,
footer .grid-rows,
footer .grid-row,
footer .grid-cols-wrapper,
footer .grid-cols,
footer .grid-col,
footer .grid-items,
footer .grid-item,
footer .module,
footer .module-body {
background: transparent !important;
}
/* Row separation: hairlines instead of heavy blocks */
footer .grid-row + .grid-row {
border-top: 1px solid rgba(255, 255, 255, .08);
}
footer .grid-row,
footer .module {
border-color: rgba(255, 255, 255, .08) !important;
}
/* Bottom row (copyright): quieter and smaller */
footer .grid-row-6,
footer .module-info_blocks {
color: #8a8a8a;
font-size: 13px;
}
footer .module-info_blocks span {
color: #8a8a8a;
}
/* ==================== PRODUCT CARDS =============================== */
.main-products .product-thumb,
.module-products .product-thumb {
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 14px !important;
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.main-products .product-thumb:hover,
.module-products .product-thumb:hover {
border-color: #b87333 !important;
box-shadow: 0 14px 30px rgba(17, 17, 17, .12) !important;
transform: translateY(-3px);
}
.product-thumb .caption .name a {
color: #111111;
}
.product-thumb .caption .name a:hover {
color: #b87333;
}
.product-thumb .price,
.product-thumb .price-new {
color: #b87333 !important;
}
.product-thumb .price-old {
color: #9a9a9a;
}
.product-thumb .image {
background: #ffffff;
}
.product-thumb .image img {
transition: transform .35s ease;
}
.product-thumb:hover .image img {
transform: scale(1.03);
}
.product-thumb .product-labels .product-label {
border-radius: 999px;
}
/* --- Marquee strip (fast-delivery ribbon): black, not orange ------ */
.grid-row-top-4,
.grid-row-top-4::before,
.grid-row-top-4::after,
.grid-row-top-4 .grid-item::before,
.grid-row-top-4 .row-bg,
.grid-row-top-4 .col-bg {
background: #111111 !important;
}
.grid-row-top-4 .module-marquee .marquee-items,
.grid-row-top-4 .module-marquee .marquee-items span,
.grid-row-top-4 .module-marquee .marquee-items p {
color: #f2f2f2 !important;
}
.grid-row-top-4 .module-marquee .marquee-items b,
.grid-row-top-4 .module-marquee .marquee-items strong {
color: #d9985f !important;
}
/* --- Info-blocks strip (24h service / secure / returns): black ---- */
.grid-row-top-6,
.grid-row-top-6::before,
.grid-row-top-6::after,
.grid-row-top-6 .grid-item::before,
.grid-row-top-6 .row-bg,
.grid-row-top-6 .col-bg {
background: #111111 !important;
}
.grid-row-top-6 .info-blocks .title,
.grid-row-top-6 .info-blocks .module-title {
color: #ffffff !important;
}
.grid-row-top-6 .info-blocks p,
.grid-row-top-6 .info-blocks span:not([class*="icon"]) {
color: #b5b5b5;
}
.grid-row-top-6 .info-blocks i,
.grid-row-top-6 .info-blocks .module-icon,
.grid-row-top-6 .info-blocks [class*="icon"] {
color: #d9985f !important;
}
/* --- PDP: per-product additional information ---------------------- */
.av-pinfo {
font-size: 14px;
line-height: 1.9;
color: #302317;
}
.av-pinfo__specs {
margin: 0 0 14px;
padding: 0;
border-top: 1px solid #e8e8e8;
}
.av-pinfo__row {
display: flex;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid #f0eeea;
}
.av-pinfo__row dt {
flex: 0 0 34%;
max-width: 190px;
margin: 0;
color: #8a7a68;
font-weight: 600;
}
.av-pinfo__row dd {
flex: 1 1 auto;
margin: 0;
color: #111111;
font-weight: 600;
}
.av-pinfo__lead {
margin: 0 0 12px;
color: #4a3f34;
}
.av-pinfo__lead strong {
color: #b87333;
}
.av-pinfo__care {
margin: 0;
padding-inline-start: 18px;
color: #6b6b6b;
}
.av-pinfo__care li {
margin-bottom: 4px;
}
@media (max-width: 520px) {
.av-pinfo__row {
flex-direction: column;
gap: 2px;
}
.av-pinfo__row dt {
flex-basis: auto;
max-width: none;
font-size: 13px;
}
}
/* ==================== LAYOUT GUARDS =============================== */
/* Marquee module: animation strip must clip, never scroll */
.module-marquee {
overflow: hidden !important;
}
/* Nothing inside the grid should force horizontal scroll */
.site-wrapper {
overflow-x: clip;
}
/* ============ FOOTER — MOBILE LAYOUT (<=767px) ==================== */
/* On phones Journal lays the three link groups out as a 3-across
carousel row (grid-auto-flow: column) inside a 327px module: the
columns collapse to ~130px, every label wraps, and the row overflows
its own module. Give each group the full width instead and split its
links into two columns. Nothing is hidden — only laid out.
grid-auto-flow is the load-bearing declaration: without it the
template-columns below are ignored and items keep flowing sideways. */
@media (max-width: 767px) {
/* --- one group per row, full width --- */
footer .module-catalog .catalog-grid .auto-grid-items {
grid-auto-flow: row !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
transform: none !important;
}
footer .module-catalog .catalog-grid .module-item {
width: auto !important;
margin: 0 !important;
}
/* every group is visible at once, so the carousel arrows are inert */
footer .module-catalog .auto-carousel-controls {
display: none;
}
/* --- a group's links: two comfortable columns --- */
/* the theme makes .subitems a flex column, which disables multicol —
switch it back to block so the two link columns actually form */
footer .module-catalog .subitems {
display: block !important;
column-count: 2;
column-gap: 18px;
}
footer .module-catalog .subitems > * {
break-inside: avoid;
}
footer .module-catalog .item-assets {
display: block;
}
/* --- group titles: smaller, shorter accent bar --- */
footer .catalog-title,
footer .title,
footer .module-title,
footer .info-block-title {
font-size: 13px !important;
padding-bottom: 8px !important;
margin-bottom: 6px !important;
letter-spacing: .06em;
}
footer .module-title::after,
footer .title::after {
width: 24px;
}
/* --- links: tighter rhythm, comfortable tap height --- */
footer .module-catalog li,
footer .links-menu li {
margin: 0 !important;
}
footer .module-catalog a:not(.catalog-title),
footer .links-menu li a {
display: block;
padding: 4px 0;
font-size: 13px;
line-height: 1.4;
}
/* --- brand logo: centred, capped --- */
footer .module-image img {
max-width: 150px;
height: auto;
}
footer .module-image .module-body {
display: flex;
justify-content: center;
}
/* --- social row: ringed chips, centred --- */
footer .grid-row-5 .icons-menu ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0;
padding: 0;
}
footer .grid-row-5 .icons-menu li {
margin: 0 !important;
}
footer .grid-row-5 .icons-menu-item a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
font-size: 12.5px;
line-height: 1;
}
footer .grid-row-5 .icons-menu-item a:hover {
border-color: #b87333;
}
/* --- newsletter: 16px field stops iOS focus zoom --- */
footer .module-newsletter .module-title {
text-align: center;
}
footer .newsletter-text {
text-align: center;
font-size: 13px;
}
footer .module-newsletter .newsletter-form .input-group input.form-control,
footer .newsletter-form input.form-control,
footer .newsletter-form input,
footer input[type="text"],
footer input[type="email"] {
font-size: 16px !important;
height: 46px;
}
/* --- row rhythm: trim dead space between blocks --- */
footer .grid-row-3 .grid-cols-wrapper,
footer .grid-row-5 .grid-cols-wrapper {
padding-top: 18px;
padding-bottom: 18px;
}
footer .grid-row-5 .grid-col-1 .grid-item {
margin-bottom: 14px;
}
/* --- closing bar: quiet type only. Do NOT touch its flex direction:
the info-blocks strip inside is a marquee and collapses into a
multi-million-pixel row when its parent becomes a column. --- */
footer .grid-row-6 p,
footer .grid-row-6 span {
font-size: 12px;
}
}
/* ================================================================
ARABIVA FORMAT STATION — black / white / copper compact list
Visual override only. Selection, option sync, cart and bundle logic
remain owned by hararah_format_stations.
================================================================ */
html[data-fsp-variant="compactlist"] .fs {
--fs-bg-deep: #ffffff;
--fs-bg-card: #ffffff;
--fs-bg-card-hover: #ffffff;
--fs-bg-card-open: #ffffff;
--fs-bg-chip: #ffffff;
--fs-bg-chip-active: #ffffff;
--fs-border-soft: rgba(17, 17, 17, .14);
--fs-border-mid: #111111;
--fs-border-active: #b87333;
--fs-gold: #b87333;
--fs-gold-soft: #d9985f;
--fs-gold-deep: #8c5a28;
--fs-text-primary: #111111;
--fs-text-secondary: rgba(17, 17, 17, .72);
--fs-text-muted: rgba(17, 17, 17, .58);
--fs-text-faint: rgba(17, 17, 17, .4);
margin: 16px 0 28px;
padding: 16px;
color: #111111;
background: #ffffff;
border: 1px solid #111111;
border-radius: 18px;
box-shadow: 0 14px 40px rgba(17, 17, 17, .08);
font-family: inherit;
}
html[data-fsp-variant="compactlist"] .fs .fs-title {
align-items: center;
min-height: 64px;
margin: -16px -16px 14px;
padding: 14px 18px;
background: #111111;
border-bottom: 3px solid #b87333;
border-radius: 16px 16px 0 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-title h2 {
color: #ffffff;
font-family: inherit;
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02em;
}
html[data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
color: #d9985f;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-title h2,
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
letter-spacing: 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-stations {
background: #ffffff !important;
border-color: #111111 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-station::before {
margin: 0 !important;
padding: 11px 16px !important;
color: #ffffff !important;
background: #111111 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-size {
min-height: 58px;
box-shadow: inset 0 -1px 0 rgba(17, 17, 17, .13);
transform: none;
transition: background-color .2s ease, box-shadow .2s ease;
}
html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected {
background: #ffffff !important;
box-shadow: inset 4px 0 0 #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-size:hover {
background: rgba(184, 115, 51, .06) !important;
box-shadow: inset 4px 0 0 #d9985f;
}
html[data-fsp-variant="compactlist"] .fs .fs-size:focus-visible,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta:focus-visible,
html[data-fsp-variant="compactlist"] .fs .hh-fs-ask-expert:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-size:hover,
[dir="rtl"] html[data-fsp-variant="compactlist"] .fs .fs-size:hover {
box-shadow: inset -4px 0 0 #d9985f;
}
html[dir="rtl"][data-fsp-variant="compactlist"] .fs .fs-size.is-selected,
[dir="rtl"] html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected {
box-shadow: inset -4px 0 0 #b87333 !important;
}
html[data-fsp-variant="compactlist"] .fs .fs-bottle {
color: #b87333;
background: #ffffff;
border-color: rgba(17, 17, 17, .16);
box-shadow: none;
}
html[data-fsp-variant="compactlist"] .fs .fs-label,
html[data-fsp-variant="compactlist"] .fs .fs-amount {
color: #111111;
font-weight: 700;
}
html[data-fsp-variant="compactlist"] .fs .fs-money {
margin-inline-start: auto;
text-align: end;
}
html[data-fsp-variant="compactlist"] .fs .fs-badge {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-size.is-selected .fs-badge {
color: #ffffff;
background: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle {
padding: 18px;
color: #111111;
background: #ffffff !important;
border-color: #111111 !important;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(17, 17, 17, .08);
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle::before {
background: none;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-header {
margin: -18px -18px 16px;
padding: 12px 16px;
color: #ffffff;
background: #111111;
border-radius: 12px 12px 0 0;
border-bottom: 2px solid #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-title,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-spark {
color: #d9985f;
font-family: inherit;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pair {
background: #ffffff;
border: 1px solid rgba(17, 17, 17, .14);
border-radius: 10px;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-price,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-plus,
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cross-tag {
color: #8c5a28;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pricing {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 6px;
background: #ffffff;
border-color: rgba(17, 17, 17, .14);
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pricing .fs-bundle-row {
justify-content: space-between;
width: 100%;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-save {
grid-column: 1 / -1;
text-align: start;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-save-pill {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta {
min-height: 48px;
color: #ffffff !important;
background: #111111 !important;
border-radius: 8px;
box-shadow: none;
transition: background-color .2s ease, color .2s ease;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-cta:hover:not(:disabled) {
color: #111111;
background: #d9985f;
box-shadow: none;
}
html[data-fsp-variant="compactlist"] .fs .hh-fs-ask-expert {
color: #8c5a28;
background: #ffffff;
border-color: #b87333;
}
@media (max-width: 520px) {
html[data-fsp-variant="compactlist"] .fs {
margin-inline: -4px;
padding: 12px;
border-radius: 14px;
}
html[data-fsp-variant="compactlist"] .fs .fs-title {
min-height: 58px;
margin: -12px -12px 12px;
padding: 12px 14px;
border-radius: 12px 12px 0 0;
}
html[data-fsp-variant="compactlist"] .fs .fs-title h2 {
font-size: 18px;
}
html[data-fsp-variant="compactlist"] .fs .fs-title .fs-hint {
max-width: 92px;
text-align: end;
}
html[data-fsp-variant="compactlist"] .fs .fs-size {
min-height: 56px;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-pair {
grid-template-columns: 1fr auto 1fr;
}
html[data-fsp-variant="compactlist"] .fs .fs-bundle-item {
padding: 4px 0;
}
}
/* Arabiva fragrance DNA — refined pyramid presentation on product pages. */
@keyframes arabiva-pyramid-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes arabiva-copper-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(184, 115, 51, 0)); }
50% { filter: drop-shadow(0 10px 18px rgba(184, 115, 51, .18)); }
}
/* These two auxiliary product popups are intentionally removed from the product media area. */
.route-product-product .product-extra-html .product-blocks-popup-btn,
.route-product-product .product-extra-description .product-blocks-popup-btn {
display: none;
}
/* ========== PRIVATE COLLECTION — description + DNA card =============
The Arabic PDP showed a bare list of notes in theme grey and a mostly
empty DNA card. Both now read as one house-voice panel: copper hairline
rules, black type, generous rhythm. Scoped to these two blocks only. */
.arabiva-private-desc {
color: #111111;
font-size: 15px;
line-height: 1.9;
max-width: 760px;
}
.arabiva-private-desc .apd-eyebrow {
margin: 0 0 6px;
font-size: 11.5px;
letter-spacing: .14em;
color: #b87333;
text-transform: uppercase;
}
.arabiva-private-desc .apd-lede {
margin: 0 0 20px;
font-size: 17px;
line-height: 1.85;
color: #111111;
}
.arabiva-private-desc .apd-close {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid #ece7e0;
color: #5c5348;
font-size: 14.5px;
}
/* the pyramid: three quiet rows, copper stage labels */
.arabiva-private-desc .apd-pyramid {
border: 1px solid #ece7e0;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, #fffdfa, #ffffff);
}
.arabiva-private-desc .apd-tier {
display: grid;
grid-template-columns: 88px 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 18px;
border-bottom: 1px solid #f3efe9;
}
.arabiva-private-desc .apd-tier:last-child { border-bottom: 0; }
.arabiva-private-desc .apd-stage {
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
color: #b87333;
}
.arabiva-private-desc .apd-notes { font-size: 15px; color: #111111; }
/* facts: label over value, hairline separated */
.arabiva-private-desc .apd-facts {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 1px;
background: #ece7e0;
border: 1px solid #ece7e0;
border-radius: 14px;
overflow: hidden;
}
.arabiva-private-desc .apd-facts li {
margin: 0;
padding: 12px 14px;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 3px;
}
.arabiva-private-desc .apd-facts span {
font-size: 11px;
letter-spacing: .06em;
color: #8a8175;
}
.arabiva-private-desc .apd-facts b { font-size: 14px; color: #111111; font-weight: 600; }
@media (max-width: 767px) {
.arabiva-private-desc { font-size: 14.5px; }
.arabiva-private-desc .apd-lede { font-size: 15.5px; }
.arabiva-private-desc .apd-tier { grid-template-columns: 64px 1fr; padding: 12px 14px; gap: 10px; }
.arabiva-private-desc .apd-facts { grid-template-columns: repeat(2, 1fr); }
}
/* --- DNA card: give the panel the same material as the description --- */
.hh-dna2 {
border-color: #ece7e0 !important;
border-radius: 18px !important;
background: linear-gradient(180deg, #fffdfa, #ffffff) !important;
}
.hh-dna2 .hh-dna2-eyebrow {
letter-spacing: .14em;
text-transform: uppercase;
color: #b87333 !important;
font-size: 11.5px !important;
}
.hh-dna2 .hh-dna2-title {
font-size: 19px !important;
font-weight: 700;
color: #111111 !important;
}
.hh-dna2 .hh-dna2-story {
font-size: 15px !important;
line-height: 1.9;
color: #3f3830 !important;
}
.hh-dna2 .hh-dna2-chip {
border-color: #e3d9cb !important;
background: #fffaf4 !important;
}
.hh-dna2 .hh-dna2-chip b { color: #b87333 !important; }
/* ── Top-bar language / currency dropdowns ───────────────────────────────────
The panels inherit the dark top bar's text colour (#f2f2f2) on a white
dropdown, so every option reads as invisible. Restore the black/white/copper
palette. (The old arabiva-polish.css styled these, but it is no longer
loaded by header.twig.) */
#language .arabiva-language-switcher .j-dropdown,
#currency .arabiva-currency-switcher .j-dropdown {
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
color: #111111 !important;
}
#language .arabiva-language-option,
#currency .arabiva-currency-option,
#language .arabiva-language-option-name,
#currency .arabiva-currency-option-title {
color: #111111 !important;
}
#language .arabiva-language-option-code,
#currency .arabiva-currency-option-code {
color: #b87333 !important;
font-weight: 800;
}
#language .arabiva-language-option.is-active,
#language .arabiva-language-option:hover,
#currency .arabiva-currency-option.is-active,
#currency .arabiva-currency-option:hover {
background: #b87333 !important;
}
#language .arabiva-language-option.is-active *,
#language .arabiva-language-option:hover *,
#currency .arabiva-currency-option.is-active *,
#currency .arabiva-currency-option:hover * {
color: #ffffff !important;
}
/* code and name were glued together ("BHDBahraini Dinar") — space them out and
line the names up in a column. Logical gap keeps LTR and RTL both correct. */
#language .arabiva-language-option,
#currency .arabiva-currency-option {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#language .arabiva-language-option-code,
#currency .arabiva-currency-option-code {
flex: 0 0 auto !important;
min-width: 42px !important;
}
#language .arabiva-language-option-name,
#currency .arabiva-currency-option-title {
flex: 1 1 auto !important;
}
/* ── RTL bidi: keep the + in front of the country code ───────────────────────
In an RTL paragraph "+96565506090" resolves as "96565506090+". Phone numbers
are LTR runs, so isolate them. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="tel:"] .links-text,
html[dir="rtl"] .store-tel {
direction: ltr !important;
unicode-bidi: embed !important;
display: inline-block !important;
}
/* Mixed Latin/Arabic info lines resolve their own direction per line. */
html[dir="rtl"] .info-block-text {
unicode-bidi: plaintext;
}
/* ── Footer: the block title rendered #1c2021 on the #111111 footer ───────── */
footer .module-info_blocks .info-block .info-block-title {
color: #ffffff !important;
}
footer .module-info_blocks .info-block .info-block-text {
color: rgba(255, 255, 255, .62) !important;
}
/* ── Newsletter button: grey label on copper ─────────────────────────────── */
footer .module-newsletter .btn-primary,
footer .module-newsletter .btn-primary * {
color: #ffffff !important;
}
/* Keep the translated subscribe label inside its control. Journal's circular
icon preset collapses .input-group-btn to zero width and absolutely places
a 44px button, which is too narrow for both Arabic and English labels. */
footer .module-newsletter .newsletter-form .input-group-btn {
flex: 0 0 auto;
width: auto;
}
footer .module-newsletter .newsletter-form .input-group-btn .btn-primary {
position: relative;
inset: auto;
transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 96px !important;
min-width: 96px !important;
height: 44px !important;
max-height: none !important;
padding: 0 16px !important;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
/* The large envelope above the heading is a Journal icon-font pseudo element. */
footer .module-newsletter::before {
color: #b87333 !important;
opacity: 1;
}
/* ── PDP description: give the note rows their own rhythm ────────────────── */
/* المقدمة / القلب / الأساس used to sit in one paragraph separated by
,
which stacks them with zero gap next to the 32px paragraph rhythm around
them — and Chrome ignores box properties on
, so CSS alone could not
space them. tooling/hh_desc_note_rows.py turned each row into its own
.hh-note-row paragraph; they only need a tighter gap than a full one. */
.product-extra-description .block-content p.hh-note-row + p.hh-note-row {
margin-top: 10px;
}
/* On a phone every row wraps to two lines, so a 10px gap is barely wider
than the line spacing inside a row and the three rows read as one block.
Widen it until the break between rows clearly beats the break inside one. */
@media (max-width: 767px) {
.product-extra-description .block-content p.hh-note-row + p.hh-note-row {
margin-top: 18px;
}
}
/* ── Category pager: put it back ─────────────────────────────────────────── */
/* Journal's infinite-scroll module hides the pager on load (inline
style="display:none") and then takes over paging. It never appends:
verified on a fresh category page, scrolled to the bottom, with its own
threshold satisfied (offset 9185 >= threshold 7409) and nextUrl resolved.
So every category stopped at its first 36 products with no way forward —
1765 of them in الزيوت العطرية المستوحاة.
!important is required because the theme sets the inline style from JS.
Remove this once the theme's pagination setting is fixed in admin. */
.main-products + .pagination-results {
display: flex !important;
}
/* ARABIVA-RESPONSIVE-13IN:START — re-applied by tooling/hh_rebase_responsive.py, keep the markers */
/* ── Home "Our Collections" (categories module 825) ──────────────────────────
Journal lays this row out with a 320px minimum track, so the five collection
cards reflow by whatever happens to fit: 5 in a row only above ~1750px, then
4+1 (1440–1700px) and 3+2 (1200–1430px). On a 13" laptop the row therefore
splits and the leftovers stretch across the full width — it reads as a
stacked, non-responsive list rather than one collection row.
Pin the row to five equal tracks from 1200px up (the whole laptop/desktop
range) using Journal's own grid variables — no !important, no new layer.
Setting the minimum track to 0 lets the max-col term win, which resolves to
exactly one fifth of the row minus the gaps. Below 1200px the theme's own
reflow is left alone: tablets and phones keep the 2-up / 1-up behaviour. */
@media (min-width: 1200px) {
body div.module-categories-825 .category-grid.auto-grid {
--grid-min-width: 0px;
--grid-min-col: 5;
--grid-max-col: 5;
}
}
/* ── Category / search listings: three products per row on a laptop ──────────
The listing grid asks for a 320px minimum track, but the product column is
only 896px at 1280 and 982px at 1366 (the filter sidebar takes the rest), so
a 13" laptop gets just two products per row at 438–481px each — the cards
blow up and the page reads as a single stacked column. Only from 1440px up
does a third card fit.
A 260px minimum track restores the intended rhythm: 3-up from 1200px and
4-up on large desktops, with card widths staying in the 274–339px range
everywhere.
Tablets need their own tier. Journal picks the listing style server-side
from the user agent, so an iPad only started rendering the grid once the
tablet default was switched from List to Grid in the admin; before that this
rule had nothing to apply to. With the grid in place the 320px track leaves
a tablet on 2-up with 352–432px cards, which is looser than the phone's 2-up
at 165px and looser than the desktop. A 220px track carries the desktop's
3-up rhythm down through the whole tablet band at 229–281px cards. Phones
are below 768px and keep the theme's own 2-up. */
@media (min-width: 768px) and (max-width: 1199px) {
body div.main-products.product-grid.auto-grid {
--grid-min-width: 220px;
}
}
@media (min-width: 1200px) {
body div.main-products.product-grid.auto-grid {
--grid-min-width: 260px;
}
}
/* ── Desktop header: logo to the start, menu beside it ───────────────────────
The logo sits absolutely centred in the mid bar, and the theme caps the menu
at `calc(50% - logo/2)` so it can never run under it. The five top-level
items need 824px, but that cap leaves only 508px at 1280, 551px at 1366 and
668px at 1600 — they fit on one line only above ~1910px. Below that the menu
wraps, and because the bar has a fixed height the second line escapes it and
lands on the icon strip (and on the "Filter" heading on listing pages), which
is what put ACCORD OILS / RAW MATERIALS on top of the categories.
Tightening padding and type is not enough — even 11px type with 8px padding
still wraps at 1440 — so the menu needs the room instead: take the logo out
of the absolute centre and let it lead the flex row, then drop the cap. The
five items then hold one line down to the theme's own desktop-header cutoff,
with ~150px still free before the cart group at the narrowest width. All
logical properties, so RTL mirrors it for free. */
@media (min-width: 1025px) {
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper {
position: static;
inset-inline: auto;
transform: none;
margin-inline-end: 0;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-main-menu-wrapper {
max-width: none;
margin-inline-start: 20px;
margin-inline-end: auto;
}
/* one line, with the item padding easing off as the bar narrows */
html.desktop-header-active .header-compact .mid-bar .desktop-main-menu-wrapper .main-menu > .j-menu {
flex-wrap: nowrap;
}
html.desktop-header-active .header-compact .mid-bar .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item > a {
padding-inline: clamp(10px, 1.3vw, 26px);
white-space: nowrap;
}
/* Cap the mark. Centred and absolutely positioned, the wrapper shrank to its
200px min-width and the image sat inside it. As a flex item it is sized by
the anchor's fixed 90px height instead, so the wordmark stretched to
312×90 — the full height of the bar, edge to edge, with no air above or
below. Hold it to 56px tall (≈194px wide, near its old footprint) and let
the wrapper centre it in the bar.
These four need !important: the anchor's height and the image's 100% box
come from rules the theme weights heavily, and without it the mark grows
to 484×140 and overflows the bar by 25px on each side — measured, not
assumed. Four declarations, not a storm, and scoped to the desktop bar. */
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper {
min-width: 0 !important;
align-items: center;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper #logo {
display: flex;
min-width: 0 !important;
align-items: center;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper #logo > a {
height: auto !important;
}
html.desktop-header-active header:not(.header-slim) .header-compact .mid-bar .desktop-logo-wrapper img.header-logo {
max-height: 56px !important;
width: auto !important;
}
}
/* ── Product hero badges ─────────────────────────────────────────────────────
The identity plugin builds these chips and ships identity.css to style them,
but header.twig only enqueues identity.js — the stylesheet is on the server
and never linked. So the spans landed with no box at all: display:inline,
no padding, no margin, no background. They butted straight up against each
other and read as one run-on string, "SintraLong-Lasting OilAlcohol-Free".
Styling them here rather than linking identity.css or editing the plugin:
that file is another session's active area (its live JS is ahead of the
repo), and pulling in the whole stylesheet would restyle the rest of the
hero in its own cream-and-terracotta palette. These few rules give the
chips a box in the house black/white/copper instead, scoped to the hero so
nothing else with these classes is touched. No !important — the chips have
no competing rules, and if identity.css is ever linked this layer loads
after it. */
#hh-identity-hero .hh-id-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
#hh-identity-hero .hh-id-badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid #e8e8e8;
border-radius: 999px;
background: #ffffff;
color: #6b6b6b;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.5;
white-space: nowrap;
}
/* The verified-match chip carries the original fragrance name, so it leads:
copper rather than the neutral grey of the attribute chips. */
#hh-identity-hero .hh-id-badge.match {
border-color: rgba(184, 115, 51, .34);
background: rgba(184, 115, 51, .07);
color: #8c5a28;
}
/* ARABIVA-RESPONSIVE-13IN:END */
/* ARABIVA-CHOOSE-FORMAT:START
Listing products have required format options. The companion JS turns the
native cart action into a product-page link; this block gives that action a
single, full-width treatment and removes quantity controls that cannot be
applied until a format is selected. */
.product-thumb.arabiva-choose-format-card .buttons-wrapper,
.product-thumb.arabiva-choose-format-card .button-group,
.product-thumb.arabiva-choose-format-card .cart-group {
width: 100%;
}
.product-thumb.arabiva-choose-format-card .cart-group {
display: flex;
}
.product-thumb.arabiva-choose-format-card .cart-group .stepper {
display: none;
}
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format {
display: flex;
flex: 1 1 100%;
width: 100%;
min-height: 46px;
align-items: center;
justify-content: center;
margin: 0;
padding: 12px 16px !important;
border: 1px solid #111111 !important;
border-radius: 6px !important;
background-color: #111111 !important;
color: #ffffff !important;
font-size: 0 !important;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.35;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format::before {
display: none;
}
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format::after {
content: 'Choose size & format';
white-space: normal;
min-width: 0;
flex: 1;
overflow-wrap: normal;
font-size: 13px;
font-weight: 700;
}
html[lang^='ar'] .product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format::after {
content: 'اختر الحجم والتركيبة';
}
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format:hover,
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format:focus-visible {
border-color: #8c5a28 !important;
background-color: #8c5a28 !important;
}
/* Secondary card actions stay icon-only, but use a real 40px control instead
of a loose 15px glyph. This keeps wishlist/compare legible and gives both
actions a dependable touch target without competing with the primary CTA. */
.product-thumb.arabiva-choose-format-card .wish-group {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 6px 0 0;
}
.product-thumb.arabiva-choose-format-card .wish-group .btn-wishlist,
.product-thumb.arabiva-choose-format-card .wish-group .btn-compare {
display: inline-flex;
flex: 0 0 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
margin: 0;
padding: 0;
border: 1px solid #e8e8e8;
border-radius: 50%;
background: #ffffff !important;
color: #5a5e60 !important;
font-size: 0 !important;
line-height: 1;
box-shadow: inset 0 0 0 1px #e8e8e8 !important;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.product-thumb.arabiva-choose-format-card .wish-group .btn-wishlist::before,
.product-thumb.arabiva-choose-format-card .wish-group .btn-compare::before {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 17px !important;
line-height: 1;
}
.product-thumb.arabiva-choose-format-card .wish-group .btn-wishlist:hover,
.product-thumb.arabiva-choose-format-card .wish-group .btn-compare:hover,
.product-thumb.arabiva-choose-format-card .wish-group .btn-wishlist:focus-visible,
.product-thumb.arabiva-choose-format-card .wish-group .btn-compare:focus-visible {
border-color: #b87333;
background: #fff8f2 !important;
color: #8c5a28 !important;
box-shadow: inset 0 0 0 1px #b87333 !important;
outline: 2px solid rgba(184, 115, 51, .22);
outline-offset: 2px;
}
/* ARABIVA-CHOOSE-FORMAT:END */
/* Visitor audit: comparison styles live in the single override stylesheet. */
#hh-compare{padding:24px 18px;color:#111111;}
.hh-cmp-head{margin:8px 0 20px}
.hh-cmp-title{font-size:32px;letter-spacing:.5px;color:#111111;margin:0 0 6px}
.hh-cmp-sub{margin:0 0 14px;color:#8c5a28;font-size:14px}
.hh-cmp-actions{display:flex;gap:8px;flex-wrap:wrap}
.hh-cmp-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:6px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer}
.hh-cmp-btn-primary{background:#b87333;color:#fff;border-color:#b87333}
.hh-cmp-btn-primary:hover{background:#d9985f;color:#fff}
.hh-cmp-btn-ghost{background:#fff;color:#8c5a28;border-color:#e8e8e8}
.hh-cmp-btn-ghost:hover{background:#f6f6f6;color:#8c5a28}
.hh-cmp-btn-warn{background:#fff;color:#8c5a28;border-color:#e8e8e8}
.hh-cmp-btn-warn:hover{background:#ffffff;color:#8c5a28}
.hh-cmp-btn-full{display:flex;justify-content:center;width:100%}
.hh-cmp-empty{text-align:center;padding:60px 20px;background:#f6f6f6;border:1px solid #e8e8e8;border-radius:14px;margin:20px 0}
.hh-cmp-empty-icon{font-size:48px;margin-bottom:14px}
.hh-cmp-empty h2{color:#b87333;margin:0 0 10px}
.hh-cmp-empty p{color:#8c5a28;font-size:14px;max-width:480px;margin:0 auto 18px}
.hh-cmp-grid{display:grid;gap:16px;margin:18px 0 22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hh-cmp-col{min-width:0}
.hh-cmp-card{position:relative;background:#fff;border:1px solid #e8e8e8;border-radius:14px;padding:18px;text-align:center;height:100%;display:flex;flex-direction:column;gap:10px}
.hh-cmp-remove{position:absolute;top:8px;right:10px;width:24px;height:24px;line-height:22px;border-radius:50%;background:#ffffff;color:#6b6b6b;text-align:center;text-decoration:none;font-size:18px;font-weight:600}
.hh-cmp-remove:hover{background:#8c5a28;color:#fff}
.hh-cmp-img{display:block;margin:0 auto}
.hh-cmp-img img{max-width:160px;max-height:160px;width:100%;height:auto}
.hh-cmp-name{display:block;font-size:18px;color:#111111;text-decoration:none;font-weight:600;line-height:1.25}
.hh-cmp-name:hover{color:#b87333}
.hh-cmp-inspired{font-size:12px;color:#8c5a28}
.hh-cmp-inspired strong{color:#b87333;font-weight:600}
.hh-cmp-price{margin:6px 0 4px;font-size:17px;color:#111111}
.hh-cmp-price small{display:block;font-size:11px;color:#6b6b6b;margin-top:2px;font-weight:400}
.hh-cmp-price s{color:#6b6b6b;font-weight:400;margin-right:4px}
.hh-cmp-rows{background:#fff;border:1px solid #e8e8e8;border-radius:14px;overflow:hidden}
.hh-cmp-row{display:grid;grid-template-columns:150px repeat(var(--hh-compare-count),minmax(0,1fr));border-bottom:1px solid #e8e8e8}
.hh-cmp-row:last-child{border-bottom:none}
.hh-cmp-row-label{padding:14px 18px;background:#f6f6f6;font-size:13px;color:#8c5a28;letter-spacing:1px;text-transform:uppercase;font-weight:600;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;justify-content:center}
.hh-cmp-row-label small{display:block;font-size:10px;color:#6b6b6b;letter-spacing:.4px;text-transform:none;margin-top:2px;font-weight:400}
.hh-cmp-row-cell{padding:14px 18px;font-size:13px;color:#3a3a3a;line-height:1.55;border-right:1px solid #e8e8e8}
.hh-cmp-row-cell:last-child{border-right:none}
.hh-cmp-row-cell small{display:block;font-size:11px;color:#6b6b6b}
.hh-cmp-muted{color:#6b6b6b}
.hh-cmp-pill{display:inline-block;padding:3px 10px;background:#ffffff;border:1px solid #e8e8e8;border-radius:999px;font-size:11px;color:#8c5a28;letter-spacing:.4px;text-transform:capitalize}
.hh-cmp-pill-good{background:#ffffff;border-color:#e8e8e8;color:#111111}
.hh-cmp-pill-bad{background:#ffffff;border-color:#e8e8e8;color:#111111}
.hh-cmp-note{display:inline-block;font-style:italic;font-size:15px;color:#8c5a28;text-decoration:none;margin-right:8px;padding:1px 4px;border-radius:3px}
.hh-cmp-note:hover{background:rgba(184,115,51,.12);color:#b87333}
.hh-cmp-note-top{color:#b87333}
.hh-cmp-note-heart{color:#8c5a28}
.hh-cmp-note-base{color:#8c5a28}
.hh-cmp-bars{display:flex;flex-direction:column;gap:6px}
.hh-cmp-bar-row{display:grid;grid-template-columns:54px 1fr 26px;align-items:center;gap:8px}
.hh-cmp-bar-label{font-size:11px;color:#6b6b6b;letter-spacing:.5px;text-transform:uppercase}
.hh-cmp-bar-track{background:#e8e8e8;border-radius:999px;height:6px;overflow:hidden}
.hh-cmp-bar-fill{display:block;height:100%;border-radius:999px;transition:width .25s}
.hh-cmp-bar-sweet{background:#b87333}
.hh-cmp-bar-fresh{background:#b87333}
.hh-cmp-bar-woody{background:#8c5a28}
.hh-cmp-bar-warm{background:#d9985f}
.hh-cmp-bar-clean{background:#8c5a28}
.hh-cmp-bar-val{font-size:11px;color:#8c5a28;text-align:right;font-weight:600}
#hh-compare .hh-cmp-grid[data-count="1"]{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
#hh-compare .hh-cmp-row-cell{min-width:0;overflow-wrap:anywhere}
@media (max-width:900px){
#hh-compare .hh-cmp-row{grid-template-columns:1fr}
#hh-compare .hh-cmp-row-cell{display:block;border-top:1px solid #e8e8e8;border-right:0}
#hh-compare .hh-cmp-row-cell::before{content:attr(data-product);display:block;font-weight:700;color:#111111;margin-bottom:6px}
#hh-compare .hh-cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
#hh-compare .hh-cmp-grid{gap:10px}
#hh-compare .hh-cmp-card{padding:12px}
#hh-compare .hh-cmp-img img{max-width:110px;max-height:110px}
#hh-compare .hh-cmp-name{font-size:15px;overflow-wrap:anywhere}
#hh-compare .hh-cmp-btn{letter-spacing:0;white-space:normal;padding:9px 10px}
}
/* Arabiva market homepage: server-selected, isolated international and GCC campaigns. */
.av-market-home{max-width:1280px;margin:28px auto 48px;background:#ffffff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;color:#111111;text-align:start}
.av-market-home *{box-sizing:border-box}
.av-market-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 30px;background:#111111;color:#ffffff;border-bottom:1px solid #8c5a28;font-size:12px;line-height:1.6}
.av-market-bar strong{letter-spacing:1.6px;color:#d9985f}
.av-market-bar span{color:#e8e8e8}
.av-market-scene{position:relative;min-height:550px;isolation:isolate;display:flex;align-items:center}
.av-market-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.av-market-world .av-market-scene{background:#111111;color:#ffffff}
.av-market-world .av-market-art{object-fit:contain;object-position:right center;width:76%;left:auto;right:0}
.av-market-copy{width:48%;padding:44px 0 44px 52px}
.av-market-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#d9985f;margin:0 0 18px}
.av-market-home h2{font-size:clamp(34px,4.1vw,58px);font-weight:700;line-height:1.09;letter-spacing:-1.6px;color:inherit;margin:0 0 22px}
.av-market-description{font-size:15px;line-height:1.85;max-width:360px;margin:0 0 26px}
.av-market-world .av-market-description{color:#e8e8e8}
.av-market-home .av-market-cta{display:inline-flex;gap:26px;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;background:#b87333;color:#111111;border:1px solid #b87333;border-radius:4px;font-size:14px;font-weight:700;text-decoration:none}
.av-market-home .av-market-cta:hover{background:#d9985f;border-color:#d9985f;color:#111111}
.av-market-home a:focus-visible{outline:3px solid #d9985f;outline-offset:4px}
.av-market-note{font-size:11px;line-height:1.65;max-width:330px;margin:18px 0 0;color:#e8e8e8}
.av-market-destination{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 30px;background:#ffffff;color:#111111;border-top:1px solid #e8e8e8}
.av-market-destination strong{font-size:15px;color:#111111}
.av-market-destination p{font-size:12px;line-height:1.7;margin:5px 0 0;color:#111111}
.av-market-destination a{display:inline-flex;align-items:center;justify-content:center;gap:16px;flex-shrink:0;min-height:44px;padding:10px 18px;border:1px solid #b87333;border-radius:4px;color:#8c5a28;font-size:13px;font-weight:700;text-decoration:none}
.av-market-destination a:hover{background:#111111;color:#ffffff;border-color:#111111}
.av-market-gulf .av-market-copy{padding:44px 52px 44px 0}
.av-market-gulf .av-market-art{width:52%;inset-inline-start:auto;inset-inline-end:0;object-fit:contain}
.av-market-gulf .av-market-eyebrow{color:#8c5a28;letter-spacing:0}
.av-market-gulf h2{letter-spacing:0;line-height:1.5}
.av-market-gulf .av-market-note{color:#111111}
@media(max-width:767px){
.av-market-home{margin:18px 10px 32px;border-radius:10px}
.av-market-bar{padding:14px 18px;flex-wrap:wrap;gap:3px;font-size:11px}
.av-market-bar strong,.av-market-bar span{width:100%}
.av-market-scene{display:flex;flex-direction:column;min-height:0}
.av-market-art{position:relative;inset:auto;width:100%;height:280px;object-fit:cover;z-index:0;order:0}
.av-market-world .av-market-art{object-fit:cover;object-position:right center;width:100%;left:auto;right:auto}
.av-market-copy,.av-market-gulf .av-market-copy{width:100%;padding:26px 24px 32px;order:1}
.av-market-home h2{font-size:38px;letter-spacing:-1px;margin-bottom:18px}
.av-market-gulf h2{font-size:32px;letter-spacing:0}
.av-market-eyebrow{font-size:10px;margin-bottom:14px}
.av-market-description{font-size:14px;max-width:none;margin-bottom:22px}
.av-market-note{max-width:none}
.av-market-destination{align-items:stretch;flex-direction:column;gap:16px;padding:22px 24px}
.av-market-destination a{align-self:flex-start}
.av-market-gulf .av-market-art{width:100%;height:270px;inset:auto;object-fit:contain}
}
/* Journal Quick Checkout: complete the native payment icon sequence. */
.section-payment .section-body>div:nth-child(3)::before{content:'\e950';font-family:icomoon}
.section-payment .section-body>div:nth-child(4)::before{content:'\e928';font-family:icomoon}
/* Compact worldwide campaign; preserve complete artwork and native slider. */
.av-market-cuckoo{max-width:1040px;margin:22px auto 30px}
.av-market-cuckoo .av-market-bar{padding:10px 22px}
.av-market-cuckoo .av-market-scene{display:grid;grid-template-columns:52% 48%;align-items:center;min-height:0}
.av-market-cuckoo .av-market-art{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;display:block}
.av-market-cuckoo .av-market-copy{width:100%;padding:24px}
.av-market-cuckoo .av-market-description{max-width:none;font-size:14px;line-height:1.7;margin-bottom:18px}
.av-market-cuckoo .av-market-note{max-width:none;margin-top:12px}
.av-market-cuckoo .av-market-destination{padding:14px 22px}
@media(max-width:767px){
.av-market-cuckoo{margin:16px 10px 24px}
.av-market-cuckoo .av-market-scene{grid-template-columns:1fr}
.av-market-cuckoo .av-market-art{width:100%;max-width:420px;height:auto;margin:auto}
.av-market-cuckoo .av-market-copy{padding:16px 20px}
.av-market-cuckoo .av-market-description{font-size:13px;line-height:1.6;margin-bottom:12px}
.av-market-cuckoo .av-market-destination{padding:14px 20px;gap:10px}
}
/* Retail card quote: keep the volume distinct from the monetary amount. */
.product-thumb .caption .price .hh-price-size {
display:inline-block;
margin-inline-start:10px;
padding:3px 8px;
border:1px solid #e8e8e8;
border-radius:6px;
color:#111111;
background:#ffffff;
font-size:12px;
font-weight:400;
line-height:1.4;
vertical-align:middle;
white-space:nowrap;
}
.product-thumb .caption .price-normal,
.product-thumb .caption .price-new { line-height:1.8; }
.product-thumb .hh-id-card-reference { margin-block:6px 10px; line-height:1.6; }
/* Catalog hierarchy: readable names, consistent quotes and touch targets. */
#product-category .products-filter {
padding:14px 16px; margin-bottom:22px; gap:16px;
border:1px solid #e8e8e8; border-radius:10px; background:#ffffff;
}
#product-category .products-filter .select-group { gap:14px; }
#product-category .products-filter select { min-height:44px; border-radius:6px; color:#111111; }
#product-category .products-filter .input-group-addon { font-size:12px; }
.main-products.product-grid .product-thumb {
border-radius:14px; border:1px solid #e8e8e8; background:#ffffff;
transition:border-color .18s ease,box-shadow .18s ease;
}
.main-products.product-grid .product-thumb:hover {
border-color:#b87333; box-shadow:0 8px 24px rgb(17 17 17 / 7%);
}
.main-products.product-grid .product-thumb .caption { padding:16px; flex:1; }
.main-products.product-grid .product-thumb .caption .name { min-height:48px; margin:0 0 6px; }
.main-products.product-grid .product-thumb .caption .name a {
color:#111111; font-size:17px; font-weight:600; line-height:1.4; overflow-wrap:anywhere;
}
.product-thumb .hh-id-card-reference {
display:block; margin:2px 0 12px; font-size:12px; font-style:normal;
color:#8c5a28; line-height:1.6; text-align:start; font-weight:400;
}
.product-thumb .hh-id-card-reference .hh-id-ref-house {
display:block; font-size:10px; font-weight:400; letter-spacing:.06em; margin-bottom:3px;
}
.product-thumb .hh-id-card-reference .hh-id-ref-impression { display:block; }
.product-thumb .hh-id-card-reference .hh-id-ref-impression strong { font-size:13px; }
.main-products.product-grid .hh-id-card-reference { min-height:64px; }
.main-products.product-grid .product-thumb .price { margin-top:auto; padding-block:10px 14px; }
.main-products.product-grid .product-thumb .price-normal,
.main-products.product-grid .product-thumb .price-new { font-size:18px; font-weight:600; }
.product-thumb.arabiva-choose-format-card .wish-group { justify-content:center; gap:12px; }
.product-thumb.arabiva-choose-format-card .wish-group .btn-wishlist,
.product-thumb.arabiva-choose-format-card .wish-group .btn-compare {
flex-basis:44px; width:44px; height:44px; min-width:44px;
}
#product-category a:focus-visible,
#product-category button:focus-visible,
#product-category select:focus-visible,
#product-category input:focus-visible { outline:2px solid #b87333; outline-offset:3px; }
#product-category .pagination > li > a,
#product-category .pagination > li > span { min-width:44px; min-height:44px; }
@media(max-width:767px) {
#product-category .products-filter { padding:10px; gap:10px; }
#product-category .products-filter .select-group { flex-wrap:wrap; gap:8px; }
#product-category .products-filter .input-group { max-width:100%; }
.main-products.product-grid .product-thumb .caption { padding:12px; }
.main-products.product-grid .product-thumb .caption .name a { font-size:15px; }
.main-products.product-grid .product-thumb .price-normal,
.main-products.product-grid .product-thumb .price-new { font-size:16px; }
.product-thumb .caption .price .hh-price-size { margin-inline-start:6px; padding:2px 5px; }
.product-thumb .hh-id-card-reference .hh-id-ref-impression { font-size:11px; }
.product-thumb .hh-id-card-reference .hh-id-ref-impression strong { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
.main-products.product-grid .product-thumb,
.main-products.product-grid .product-thumb .image img { transition:none; }
}
@media(max-width:767px) {
.product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format::after { font-size:12px; line-height:1.4; }
.main-products.product-grid .hh-id-card-reference { min-height:100px; }
}
/* Shared reading, form and support-page experience. */
#content .form-control:not(textarea):not([type=checkbox]):not([type=radio]) { min-height:44px; }
#content textarea.form-control { min-height:130px; resize:vertical; }
#content .form-control:focus-visible,
#content .btn:focus-visible,
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible { outline:2px solid #b87333; outline-offset:3px; }
#content .text-danger { line-height:1.5; margin-top:6px; }
#information-information #content > .content { line-height:1.8; overflow-wrap:anywhere; }
.av-service-page { max-width:840px; margin-inline:auto; color:#111111; line-height:1.8; }
.av-service-eyebrow { color:#8c5a28; font-size:11px; letter-spacing:.08em; font-weight:600; }
.av-service-page h2 { font-size:clamp(25px,3vw,36px); line-height:1.25; margin:12px 0 18px; }
.av-service-intro { font-size:16px; max-width:700px; }
.av-service-steps { counter-reset:service; list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:26px 0; }
.av-service-steps li { counter-increment:service; padding:20px; border:1px solid #e8e8e8; border-radius:12px; }
.av-service-steps li::before { content:counter(service); display:block; color:#b87333; font-size:26px; margin-bottom:12px; }
.av-service-steps strong { font-size:15px; }
.av-service-steps p { margin:8px 0 0; font-size:13px; }
.av-service-questions { border-block-start:1px solid #e8e8e8; margin-block:24px; }
.av-service-questions details { border-block-end:1px solid #e8e8e8; padding:0 4px 0; }
.av-service-questions summary { padding:18px 0; min-height:52px; cursor:pointer; font-weight:600; line-height:1.5; }
.av-service-questions summary:focus-visible { outline:2px solid #b87333; outline-offset:2px; }
.av-service-questions details[open] { padding-bottom:18px; }
.av-service-questions details[open] summary { color:#8c5a28; }
.av-service-questions p { margin:0 0 10px; }
.av-service-questions a { color:#8c5a28; text-decoration:underline; text-underline-offset:3px; }
.av-service-help { background:#111111; color:#ffffff; padding:26px; border-radius:12px; margin-block:24px; }
.av-service-help strong { font-size:19px; }
.av-service-help p { margin:10px 0 18px; }
.av-service-help .btn.btn-primary { background:#ffffff; color:#111111; border:1px solid #ffffff; min-height:44px; padding:10px 20px; }
.av-service-help .btn.btn-primary:hover { background:#d9985f; border-color:#d9985f; }
@media(max-width:767px) {
#content input.form-control,#content select.form-control,#content textarea.form-control { font-size:16px; }
.av-service-steps { grid-template-columns:1fr; gap:12px; }
.av-service-steps li { padding:16px; }
.av-service-steps li::before { float:inline-start; margin-inline-end:14px; margin-bottom:0; }
.av-service-help { padding:20px; }
}
/* 2026-09-08: keep motion on composited properties, retaining native controls. */
.module-slider .slide-content,
.module-slider .module-item,
.module-marquee .module-item,
.module-marquee .module-item::before {
transition-property: transform, opacity;
}
.product-thumb .wish-group { transition-property: opacity, transform; }
.product-thumb .btn { transition-property: opacity, transform; }
.module-slider .slide-text,
.module-slider .slide-content > img { transition-property: transform, opacity; }
/* Below-fold home sections retain their content and render as they approach view. */
@supports (content-visibility: auto) {
.route-common-home .module-products,
.route-common-home .module-blog_posts,
.route-common-home .module-testimonials {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
}
.module-marquee .marquee-items-1 { left: 0; will-change: transform; }
@keyframes swap-left {
0%, 50% { transform: translateX(0); }
50.01%, 100% { transform: translateX(200%); }
}
@keyframes swap-right {
0%, 50% { transform: translateX(200%); }
50.01%, 100% { transform: translateX(0); }
}
.av-motion-paused .marquee-slider,
.av-motion-paused .marquee-items { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.module-marquee .marquee-items { animation-play-state: paused; }
.module-slider .slide-content { transition-duration: 0s; }
}
/* ARABIVA-SHOP-STORY: scoped information-page editorial layout. */
html:has(.av-story) .site-wrapper > #top { display: none; }
html:has(.av-story) .site-wrapper > h1.page-title { display: block; margin: 0; padding: 22px 24px; font-size: 18px; line-height: 1.4; background: #ffffff; color: #111111; }
html:has(.av-story) #information-information { max-width: 1280px; padding: 0 32px 48px; }
html:has(.av-story) #information-information > .row { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
html:has(.av-story) #information-information #content { width: 100%; flex: 0 0 100%; max-width: 100%; padding: 0; margin: 0; }
html:has(.av-story) #information-information #column-right { width: 100%; flex: 0 0 100%; max-width: 100%; padding: 40px 0 0; margin: 0; }
html:has(.av-story) #column-right .accordion-menu { display: flex; flex-wrap: wrap; gap: 8px 24px; }
html:has(.av-story) #column-right .accordion-menu > li { width: auto; }
html:has(.av-story) #column-right .module-title { font-size: 18px; }
.av-story { color: #111111; font-size: 16px; line-height: 1.85; }
.av-story * { box-sizing: border-box; }
.av-story h1, .av-story h2, .av-story h3, .av-story p, .av-story figure { margin: 0; }
.av-story h2 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.35; font-weight: 700; }
.av-story .av-story-eyebrow { font-size: 12px; font-weight: 600; color: #8c5a28; line-height: 1.7; margin-bottom: 14px; }
.av-story-hero { display: grid; grid-template-columns: 1fr 1fr; background: #111111; overflow: hidden; }
.av-story-welcome { padding: clamp(28px, 4.6vw, 64px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #ffffff; }
.av-story-welcome .av-story-eyebrow, .av-story-invite .av-story-eyebrow { color: #d9985f; }
.av-story-welcome .av-story-headline { color: #ffffff; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.35; margin-bottom: 24px; }
.av-story-welcome .av-story-headline em { font-style: normal; color: #d9985f; }
.av-story .av-story-lead { color: #ffffff; opacity: .85; max-width: 460px; margin-bottom: 30px; font-size: 17px; line-height: 1.9; }
.av-story .av-story-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 52px; padding: 12px 24px; border: 1px solid #b87333; background: #b87333; color: #111111; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.av-story .av-story-button:hover { background: #d9985f; border-color: #d9985f; color: #111111; }
.av-story-signature { display: flex; flex-direction: column; gap: 5px; margin-top: 40px; padding-top: 22px; border-top: 1px solid #8c5a28; width: 100%; }
.av-story-signature span { font-size: 22px; letter-spacing: .18em; }
.av-story-signature small { color: #d9985f; font-size: 12px; }
.av-story-cover { position: relative; min-width: 0; background: #111111; }
.av-story .av-story-photo { display: block; width: 100%; height: auto; object-fit: cover; }
.av-story .av-story-photo-1 { filter: brightness(1.035) contrast(1.025) saturate(.87); }
.av-story .av-story-photo-2 { filter: brightness(1.025) contrast(1.04) saturate(.93); }
.av-story .av-story-photo-3 { filter: brightness(1.055) contrast(1.035) saturate(.93); }
.av-story-cover .av-story-photo { height: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.av-story-cover figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 32px 22px 16px; color: #ffffff; background: linear-gradient(transparent, #111111); font-size: 13px; }
.av-story-facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e8e8e8; margin-bottom: 78px; }
.av-story-facts > div { display: flex; flex-direction: column; padding: 28px 24px; text-align: center; }
.av-story-facts > div + div { border-inline-start: 1px solid #e8e8e8; }
.av-story-facts strong { font-size: 23px; line-height: 1.6; font-weight: 600; }
.av-story-facts span { font-size: 13px; color: #8c5a28; }
.av-story-branches { scroll-margin-top: 120px; }
.av-story-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; }
.av-story-section-heading > p { max-width: 320px; font-size: 15px; }
.av-story-branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.av-story-branch { min-width: 0; }
.av-story-frame { display: block; position: relative; overflow: hidden; background: #111111; }
.av-story-frame .av-story-photo { aspect-ratio: 3 / 4; object-fit: contain; transition: transform .45s ease; }
.av-story-frame:hover .av-story-photo { transform: scale(1.035); }
.av-story-number { position: absolute; top: 14px; inset-inline-start: 14px; display: grid; place-items: center; width: 42px; height: 42px; background: #111111; color: #ffffff; font-size: 18px; }
.av-story-enlarge { position: absolute; bottom: 14px; inset-inline-end: 14px; padding: 7px 12px; background: #ffffff; color: #111111; font-size: 12px; }
.av-story-branch-copy { padding: 24px 0 0; }
.av-story-branch-copy .av-story-eyebrow { margin-bottom: 8px; }
.av-story-branch-copy h3 { font-size: 30px; line-height: 1.35; margin-bottom: 14px; }
.av-story-branch-copy > p:not(.av-story-eyebrow) { font-size: 15px; min-height: 85px; line-height: 1.85; margin-bottom: 18px; }
.av-story .av-story-map { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-block: 1px solid #e8e8e8; min-height: 54px; padding: 12px 0; color: #8c5a28; text-decoration: none; font-size: 15px; font-weight: 600; }
.av-story .av-story-map:hover { color: #111111; border-color: #b87333; }
.av-story-read { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; margin-block: 90px; padding-block: 44px; border-top: 1px solid #e8e8e8; }
.av-story-read > div > p:last-child { margin-top: 22px; max-width: 380px; }
.av-story-details details { border-bottom: 1px solid #e8e8e8; }
.av-story-details summary { padding: 20px 0; font-size: 20px; font-weight: 600; cursor: pointer; }
.av-story-details details[open] summary { color: #8c5a28; }
.av-story-detail-body { padding-bottom: 22px; font-size: 15px; }
.av-story-detail-body p { margin-bottom: 16px; }
.av-story-detail-body .row { display: block; margin: 0; }
.av-story-detail-body .col-sm-4 { width: 100%; padding: 0; }
.av-story-invite { padding: 64px 24px; text-align: center; background: #111111; color: #ffffff; }
.av-story-invite h2 { color: #ffffff; margin-bottom: 18px; }
.av-story-invite > p:not(.av-story-eyebrow) { max-width: 560px; margin: 0 auto 28px; opacity: .85; }
.av-story a:focus-visible, .av-story summary:focus-visible { outline: 3px solid #b87333; outline-offset: 4px; }
@media (max-width: 900px) {
.av-story-welcome { padding: 28px; }
.av-story-welcome .av-story-headline { font-size: 34px; }
.av-story .av-story-lead { font-size: 15px; }
.av-story-signature { margin-top: 24px; }
.av-story-read { gap: 36px; }
.av-story-branch-grid { gap: 18px; }
}
@media (max-width: 767px) {
html:has(.av-story) #information-information { padding: 0 16px 32px; }
html:has(.av-story) .site-wrapper > h1.page-title { padding: 16px; font-size: 15px; }
.av-story-hero { grid-template-columns: 1fr; }
.av-story-welcome { padding: 32px 26px; }
.av-story-welcome .av-story-headline { font-size: 38px; }
.av-story-signature { margin-top: 26px; }
.av-story-cover { grid-row: 1; }
.av-story-cover .av-story-photo { height: 360px; aspect-ratio: auto; object-fit: cover; object-position: center 35%; }
.av-story-facts { margin-bottom: 48px; grid-template-columns: 1fr; }
.av-story-facts > div { padding: 16px; }
.av-story-facts > div + div { border-inline-start: 0; border-top: 1px solid #e8e8e8; }
.av-story-facts strong { font-size: 21px; }
.av-story-section-heading { display: block; margin-bottom: 24px; }
.av-story-section-heading > p { margin-top: 14px; }
.av-story-branch-grid { grid-template-columns: 1fr; gap: 42px; }
.av-story-branch-copy > p:not(.av-story-eyebrow) { min-height: 0; }
.av-story-read { grid-template-columns: 1fr; gap: 26px; margin-block: 54px; padding-block: 32px 0; }
.av-story-invite { padding: 44px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.av-story-frame .av-story-photo, .av-story .av-story-button { transition: none; }
}
/* END ARABIVA-SHOP-STORY */
/* Arabiva account: a private shopping space, rendered on the server. */
#account-account .av-account-content { width:100%; max-width:100%; flex:0 0 100%; }
.av-account { --av-account-copper:#b87333; color:#111111; max-width:1240px; margin:0 auto 48px; text-align:start; font-size:15px; line-height:1.65; }
.av-account * { box-sizing:border-box; }
.av-account h2,.av-account h3,.av-account h4,.av-account p { margin:0; color:inherit; text-transform:none; letter-spacing:normal; font-family:inherit; }
.av-account a { color:inherit; text-decoration:none; }
.av-account svg { width:22px; height:22px; flex:none; vertical-align:middle; }
.av-account a:focus-visible,.av-account summary:focus-visible { outline:3px solid #b87333; outline-offset:5px; }
.av-account [dir] { text-align:start; }
.av-account .av-account-hero { background:#111111; color:#ffffff; padding:42px 44px; border-radius:16px; display:grid; grid-template-columns:1.7fr 1fr; gap:40px; overflow:hidden; position:relative; }
.av-account .av-account-hero::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:#b87333; }
.av-account .av-account-kicker { font-size:11px; font-weight:600; letter-spacing:.12em; color:#8c5a28; line-height:1.6; }
.av-account[dir=rtl] .av-account-kicker { letter-spacing:0; font-size:13px; }
.av-account .av-account-hero .av-account-kicker { color:#d9985f; }
.av-account .av-account-welcome { align-self:center; min-width:0; }
.av-account .av-account-welcome h2 { font-size:clamp(27px,3vw,42px); line-height:1.3; font-weight:650; margin:12px 0; overflow-wrap:anywhere; }
.av-account .av-account-intro { max-width:580px; color:#ffffff; opacity:.78; font-size:16px; margin-bottom:24px; }
.av-account .av-account-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:12px 20px; min-height:46px; background:#111111; border:1px solid #111111; color:#ffffff; border-radius:7px; font-weight:600; font-size:14px; line-height:1.5; transition:background .18s,color .18s,border-color .18s; }
.av-account .av-account-button-light { background:#ffffff; border-color:#ffffff; color:#111111; }
.av-account .av-account-button:hover { background:#8c5a28; border-color:#8c5a28; color:#ffffff; }
.av-account .av-account-button-light:hover { background:#d9985f; border-color:#d9985f; color:#111111; }
.av-account .av-account-signature { position:relative; min-height:196px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:14px 32px; border-inline-start:1px solid rgb(255 255 255 / 15%); }
.av-account .av-account-signature > svg { width:60px; height:60px; color:#d9985f; margin-bottom:18px; position:relative; }
.av-account .av-account-signature p { max-width:240px; font-size:16px; text-align:center; position:relative; }
.av-account .av-account-orbit { position:absolute; width:170px; height:170px; border:1px solid rgb(184 115 51 / 30%); border-radius:50%; top:-24px; }
.av-account .av-account-orbit::before { content:""; position:absolute; inset:16px; border:1px solid rgb(184 115 51 / 20%); border-radius:50%; }
.av-account .av-account-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 32px; }
.av-account .av-account-shortcut { display:flex; align-items:center; gap:13px; padding:21px 17px; background:#ffffff; border:1px solid #e8e8e8; border-radius:10px; min-width:0; transition:border-color .18s,background .18s; }
.av-account .av-account-shortcut:hover { border-color:#b87333; background:rgb(184 115 51 / 4%); }
.av-account .av-account-shortcut > span:nth-child(2) { min-width:0; }
.av-account .av-account-shortcut > svg { margin-inline-start:auto; width:16px; }
.av-account .av-account-shortcut strong { display:block; font-size:15px; line-height:1.45; }
.av-account .av-account-shortcut small { display:block; font-size:12px; line-height:1.6; color:#666666; margin-top:5px; }
.av-account .av-account-icon { display:inline-flex; flex:none; justify-content:center; align-items:center; width:38px; height:38px; color:#8c5a28; }
.av-account .av-account-columns { display:grid; grid-template-columns:minmax(0,1fr) 342px; align-items:start; gap:28px; }
.av-account .av-account-primary,.av-account .av-account-aside { min-width:0; }
.av-account .av-account-panel { border:1px solid #e8e8e8; background:#ffffff; border-radius:12px; padding:26px; }
.av-account .av-account-panel h3 { font-size:20px; font-weight:650; line-height:1.4; }
.av-account .av-account-section-head { display:flex; justify-content:space-between; align-items:start; gap:22px; margin-bottom:20px; }
.av-account .av-account-section-head p { font-size:13px; color:#666666; margin-top:5px; }
.av-account .av-account-text-link { display:inline-flex; align-items:center; gap:8px; color:#8c5a28; font-size:13px; font-weight:600; min-height:36px; line-height:1.5; }
.av-account .av-account-text-link svg { width:16px; }
.av-account .av-account-text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.av-account .av-account-section-head > a { flex-shrink:0; }
.av-account .av-account-order { display:flex; align-items:center; gap:15px; padding:21px 0; border-top:1px solid #e8e8e8; }
.av-account .av-account-order:hover .av-account-order-info strong { color:#8c5a28; }
.av-account .av-account-order > .av-account-icon { width:44px; height:52px; background:rgb(184 115 51 / 6%); border-radius:6px; }
.av-account .av-account-order-info { min-width:0; flex:1; }
.av-account .av-account-order-info > strong { font-size:16px; }
.av-account .av-account-order-info > span { display:block; font-size:12px; color:#666666; margin-top:3px; }
.av-account .av-account-order-info .av-account-status { display:table; color:#111111; font-size:11px; background:rgb(17 17 17 / 5%); padding:2px 8px; border-radius:4px; margin-top:8px; }
.av-account .av-account-order-value { text-align:end; font-size:15px; font-weight:600; }
.av-account .av-account-order-value > bdi { display:block; }
.av-account .av-account-order-value small { display:flex; gap:7px; align-items:center; justify-content:flex-end; color:#8c5a28; font-size:11px; margin-top:9px; font-weight:400; }
.av-account .av-account-order-value svg { width:14px; height:14px; }
.av-account .av-account-currency-note { color:#666666; font-size:11px; padding-top:10px; border-top:1px solid #e8e8e8; }
.av-account .av-account-empty { text-align:center; padding:28px 18px; border-top:1px solid #e8e8e8; }
.av-account .av-account-empty > .av-account-icon { width:62px; height:62px; background:rgb(184 115 51 / 6%); border-radius:50%; margin-bottom:16px; }
.av-account .av-account-empty h4 { font-size:20px; }
.av-account .av-account-empty p { margin:8px auto 20px; max-width:360px; color:#666666; font-size:14px; }
.av-account .av-account-settings { padding:25px 22px 8px; }
.av-account .av-account-settings h3 { font-size:18px; margin-bottom:12px; }
.av-account .av-account-setting { display:flex; gap:10px; align-items:center; padding:16px 0; border-top:1px solid #e8e8e8; }
.av-account .av-account-setting strong { font-size:14px; display:block; }
.av-account .av-account-setting small { color:#666666; font-size:11px; display:block; margin-top:3px; }
.av-account .av-account-setting > svg { width:16px; margin-inline-start:auto; }
.av-account .av-account-setting:hover strong { color:#8c5a28; }
.av-account .av-account-rewards { border:1px solid #e8e8e8; border-radius:12px; margin-top:16px; background:#ffffff; }
.av-account .av-account-rewards summary { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:22px; cursor:pointer; list-style:none; font-size:14px; }
.av-account .av-account-rewards summary::-webkit-details-marker { display:none; }
.av-account .av-account-rewards summary strong { display:block; margin-top:8px; color:#8c5a28; font-size:27px; line-height:1.2; }
.av-account .av-account-rewards summary small { font-size:12px; font-weight:400; }
.av-account .av-account-expand { font-size:26px; font-weight:300; color:#8c5a28; }
.av-account .av-account-rewards[open] .av-account-expand { transform:rotate(45deg); }
.av-account .av-account-rewards-body { padding:0 22px 22px; font-size:13px; }
.av-account .av-account-rewards-body p { color:#666666; margin-bottom:8px; }
.av-account .av-account-rewards-body h4 { font-size:15px; margin:18px 0 8px; }
.av-account .av-account-coupon { display:flex; flex-wrap:wrap; gap:8px; padding:12px; margin-top:8px; border:1px dashed #b87333; border-radius:6px; }
.av-account .av-account-coupon code { background:transparent; color:#111111; user-select:all; }
.av-account .av-account-coupon small { color:#666666; font-size:11px; }
.av-account .av-account-service { padding:24px; margin-top:16px; background:rgb(184 115 51 / 6%); border:1px solid rgb(184 115 51 / 18%); border-radius:12px; }
.av-account .av-account-service h3 { font-size:18px; line-height:1.55; margin:10px 0; }
.av-account .av-account-service p { font-size:13px; color:#666666; margin-bottom:20px; }
.av-account .av-account-service .av-account-button { width:100%; font-size:12px; gap:10px; padding-inline:12px; }
.av-account .av-account-service-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:14px; }
.av-account .av-account-service-links a { min-height:34px; padding-block:6px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.av-account .av-account-discovery { padding:32px 0 0; }
.av-account .av-account-discovery h3 { font-size:26px; line-height:1.4; margin:7px 0; }
.av-account .av-account-discovery > p:not(.av-account-kicker) { color:#666666; font-size:14px; }
.av-account .av-account-edits { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.av-account .av-account-edit { padding:26px; min-height:254px; display:flex; flex-direction:column; border-radius:12px; border:1px solid #e8e8e8; background:#ffffff; overflow:hidden; position:relative; }
.av-account .av-account-edit h4 { font-size:21px; line-height:1.4; margin:16px 0 8px; }
.av-account .av-account-edit p { font-size:13px; line-height:1.7; opacity:.8; margin-bottom:22px; }
.av-account .av-account-edit .av-account-edit-mark { color:#8c5a28; }
.av-account .av-account-edit-mark svg { width:32px; height:32px; }
.av-account .av-account-edit-signature { background:#111111; border-color:#111111; color:#ffffff; }
.av-account .av-account-edit-signature .av-account-edit-mark { color:#d9985f; }
.av-account .av-account-edit-cta { display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:600; font-size:12px; margin-top:auto; }
.av-account .av-account-edit:hover { border-color:#b87333; }
.av-account .av-account-edit:hover .av-account-edit-cta { text-decoration:underline; text-underline-offset:4px; }
.av-account .av-account-bottom { display:flex; justify-content:space-between; align-items:center; padding:24px 0 0; margin-top:32px; border-top:1px solid #e8e8e8; }
.av-account .av-account-bottom > span { letter-spacing:.24em; color:#8c5a28; font-size:12px; }
.av-account .av-account-bottom a { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:13px; color:#666666; }
.av-account .av-account-bottom a:hover { color:#111111; }
.av-account[dir=rtl] a > svg:last-child,.av-account[dir=rtl] .av-account-order-value svg,.av-account[dir=rtl] .av-account-edit-cta svg { transform:rotate(180deg); }
@media(max-width:1100px) {
.av-account .av-account-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.av-account .av-account-columns { grid-template-columns:minmax(0,1fr) 300px; gap:20px; }
.av-account .av-account-section-head { flex-direction:column; gap:8px; }
}
@media(max-width:767px) {
.av-account { margin-bottom:28px; }
.av-account .av-account-hero { padding:28px 24px; grid-template-columns:minmax(0,1fr); gap:0; border-radius:12px; }
.av-account .av-account-welcome h2 { font-size:28px; margin:12px 0; }
.av-account .av-account-intro { font-size:14px; margin-bottom:20px; }
.av-account .av-account-signature { min-height:0; padding:20px 0 0; margin-top:24px; border-inline-start:0; border-top:1px solid rgb(255 255 255 / 15%); flex-direction:row; gap:14px; justify-content:flex-start; }
.av-account .av-account-signature > svg { width:25px; height:25px; margin:0; }
.av-account .av-account-signature p { font-size:12px; text-align:start; max-width:none; }
.av-account .av-account-orbit { width:70px; height:70px; inset-block-start:-2px; inset-inline-end:-60px; }
.av-account .av-account-shortcuts { gap:10px; margin:14px 0 24px; }
.av-account .av-account-shortcut { padding:15px 12px; align-items:flex-start; flex-direction:column; gap:8px; position:relative; }
.av-account .av-account-shortcut .av-account-icon { width:28px; height:28px; }
.av-account .av-account-shortcut > svg { position:absolute; inset-inline-end:12px; inset-block-start:17px; }
.av-account .av-account-shortcut strong { font-size:14px; }
.av-account .av-account-shortcut small { font-size:11px; margin-top:5px; }
.av-account .av-account-columns { grid-template-columns:minmax(0,1fr); gap:24px; }
.av-account .av-account-panel { padding:20px 16px; }
.av-account .av-account-section-head { gap:8px; margin-bottom:12px; }
.av-account .av-account-order { gap:10px; padding:18px 0; }
.av-account .av-account-order > .av-account-icon { width:32px; height:44px; }
.av-account .av-account-order-info > strong { font-size:14px; }
.av-account .av-account-order-info > span { font-size:10px; }
.av-account .av-account-order-value { font-size:13px; }
.av-account .av-account-order-value small { font-size:10px; gap:4px; }
.av-account .av-account-discovery { padding-top:26px; }
.av-account .av-account-discovery h3 { font-size:23px; }
.av-account .av-account-edits { grid-template-columns:1fr; gap:12px; }
.av-account .av-account-edit { padding:22px; min-height:210px; }
.av-account .av-account-settings { padding-bottom:4px; }
}
@media(prefers-reduced-motion:reduce) { .av-account a { transition:none; } }
/* Arabiva account edit — native fields, compact bilingual layout (2026-09-13). */
#account-edit.av-edit { max-width:1160px; margin:0 auto 56px; color:#111111; text-align:start; }
#account-edit.av-edit * { box-sizing:border-box; }
#account-edit .av-edit__content { width:100%; min-width:0; padding:0; }
#account-edit .av-edit__back { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 0 18px; color:#8c5a28; font-weight:600; text-decoration:none; }
#account-edit .av-edit__layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }
#account-edit .av-edit__sidebar { background:#111111; color:#ffffff; border-radius:20px; padding:26px 20px 20px; }
#account-edit .av-edit__brand { color:#d9985f; letter-spacing:.18em; font-size:12px; margin:0 0 14px; }
#account-edit .av-edit__sidebar h2 { color:#ffffff; font-size:21px; line-height:1.5; margin:0 0 8px; font-weight:600; }
#account-edit .av-edit__nav-intro { color:#ffffff; opacity:.78; font-size:13px; line-height:1.8; margin:0 0 24px; }
#account-edit .av-edit__sidebar nav { display:grid; gap:5px; }
#account-edit .av-edit__sidebar nav a { display:block; color:#ffffff; font-size:14px; line-height:1.6; border:1px solid transparent; border-radius:10px; padding:12px 14px; text-decoration:none; }
#account-edit .av-edit__sidebar nav a[aria-current="page"] { background:#ffffff; color:#111111; border-inline-start:4px solid #b87333; font-weight:700; }
#account-edit .av-edit__sidebar nav a:hover { border-color:#b87333; }
#account-edit .av-edit__main { min-width:0; }
#account-edit .av-edit__card { border:1px solid #e8e8e8; border-radius:20px; padding:30px; background:#ffffff; }
#account-edit .av-edit__intro h2 { color:#111111; margin:0 0 10px; font-size:24px; line-height:1.5; font-weight:600; }
#account-edit .av-edit__intro p { color:#111111; margin:0; line-height:1.85; font-size:14px; }
#account-edit .av-edit__form { margin:24px 0 0; padding:0; width:100%; }
#account-edit .av-edit__required { font-size:12px; line-height:1.7; color:#8c5a28; margin:0 0 18px; }
#account-edit .av-edit__fields { --input-group-spacing:0px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 20px; }
#account-edit .av-edit__fields .form-group { --input-group-spacing:0px; display:block; width:auto; min-width:0; margin:0; padding:0; float:none; }
#account-edit .av-edit__fields .control-label { display:block; width:auto; float:none; padding:0; margin:0 0 8px; text-align:start; color:#111111; font-size:14px; font-weight:600; }
#account-edit .av-edit__fields .control-label::before,
#account-edit .av-edit__fields .control-label::after { content:normal; }
#account-edit .av-edit__input,
#account-edit .av-edit__fields .col-sm-10 { width:100%; float:none; padding:0; min-width:0; }
#account-edit .av-edit__fields :is(.form-control,.av-edit__control) { display:block; width:100%; min-width:0; max-width:100%; height:50px; background:#ffffff; color:#111111; border:1px solid #e8e8e8; border-radius:10px; padding:11px 14px; font:inherit; font-size:16px; line-height:1.5; box-shadow:none; text-align:start; }
#account-edit .av-edit__fields input[type="email"],
#account-edit .av-edit__fields input[type="tel"] { direction:ltr; text-align:left; }
#account-edit .av-edit__fields :is(.form-control,.av-edit__control):focus { border-color:#b87333; outline:2px solid #b87333; outline-offset:2px; box-shadow:none; }
#account-edit .av-edit__fields :is(.form-control,.av-edit__control)[aria-invalid="true"] { border-color:#8c5a28; }
#account-edit .av-edit__fields .text-danger { display:block; color:#8c5a28; font-size:13px; line-height:1.65; margin:8px 0 0; overflow-wrap:anywhere; }
#account-edit .av-edit__fields .custom-field { grid-column:1/-1; }
#account-edit .av-edit__fields .custom-field.required > .control-label::after { content:" *"; color:#8c5a28; }
#account-edit .av-edit__fields textarea.form-control { height:auto; min-height:120px; }
#account-edit .av-edit__fields .input-group { display:flex; }
#account-edit .av-edit__fields .input-group .form-control { flex:1; }
#account-edit .av-edit__fields .input-group-btn { width:auto; }
#account-edit .av-edit__actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:28px 0 0; padding-top:24px; border-top:1px solid #e8e8e8; }
#account-edit .av-edit__save,
#account-edit .av-edit__cancel { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border:1px solid #111111; border-radius:10px; font:inherit; font-size:15px; line-height:1.5; font-weight:600; text-decoration:none; cursor:pointer; }
#account-edit .av-edit__save { background:#111111; color:#ffffff; }
#account-edit .av-edit__save:hover { background:#8c5a28; border-color:#8c5a28; }
#account-edit .av-edit__cancel { background:#ffffff; color:#111111; border-color:#e8e8e8; }
#account-edit .av-edit__cancel:hover { border-color:#b87333; }
#account-edit .av-edit__help { margin-top:20px; padding:22px 24px; border-inline-start:3px solid #b87333; }
#account-edit .av-edit__help h2 { font-size:16px; font-weight:600; line-height:1.6; margin:0 0 6px; color:#111111; }
#account-edit .av-edit__help p { font-size:13px; line-height:1.8; margin:0 0 10px; color:#111111; }
#account-edit .av-edit__help a { font-size:14px; color:#8c5a28; text-decoration:underline; text-underline-offset:4px; }
#account-edit .av-edit__errors { margin:20px 0; padding:16px; border:1px solid #8c5a28; border-inline-start-width:4px; border-radius:10px; line-height:1.7; color:#111111; }
#account-edit .av-edit__errors p { margin:8px 0 0; }
#account-edit a:focus-visible,
#account-edit button:focus-visible { outline:3px solid #b87333; outline-offset:4px; }
@media (max-width:900px) {
#account-edit .av-edit__layout { grid-template-columns:220px minmax(0,1fr); gap:20px; }
#account-edit .av-edit__card { padding:24px; }
#account-edit .av-edit__fields { grid-template-columns:1fr; }
}
@media (max-width:767px) {
#account-edit.av-edit { margin-bottom:32px; padding-inline:16px; }
#account-edit .av-edit__layout { grid-template-columns:1fr; gap:20px; }
#account-edit .av-edit__sidebar { padding:20px; border-radius:16px; }
#account-edit .av-edit__sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#account-edit .av-edit__sidebar nav a { padding:10px; font-size:13px; }
#account-edit .av-edit__nav-intro { margin-bottom:16px; }
#account-edit .av-edit__brand { margin-bottom:8px; }
#account-edit .av-edit__card { padding:22px 18px; border-radius:16px; }
#account-edit .av-edit__intro h2 { font-size:22px; }
#account-edit .av-edit__fields { gap:20px; }
#account-edit .av-edit__actions { align-items:stretch; }
#account-edit .av-edit__save { flex:1; padding-inline:16px; }
#account-edit .av-edit__cancel { padding-inline:16px; }
#account-edit .av-edit__help { padding:14px 18px; }
}
/* Shared Arabiva account tabs — 2026-09-13. */
.av-account-nav { background:#111111; color:#ffffff; padding:24px 20px; border-radius:18px; text-align:start; min-width:0; }
.av-account-nav * { box-sizing:border-box; }
.av-account-nav .av-account-nav__brand { margin:0 0 14px; color:#d9985f; font-size:12px; letter-spacing:.18em; }
.av-account-nav h2 { color:#ffffff; font-size:21px; line-height:1.5; font-weight:600; margin:0 0 22px; }
.av-account-nav__main,.av-account-nav__more { display:grid; gap:5px; }
.av-account-nav nav a { display:block; border:1px solid transparent; padding:12px; border-radius:9px; font-size:14px; line-height:1.5; color:#ffffff; text-decoration:none; overflow-wrap:anywhere; }
.av-account-nav nav a[aria-current="page"] { background:#ffffff; color:#111111; border-inline-start:4px solid #b87333; font-weight:600; }
.av-account-nav nav a:hover { border-color:#b87333; }
.av-account-nav details { border-top:1px solid #8c5a28; margin-top:16px; padding-top:12px; }
.av-account-nav summary { padding:10px 4px; cursor:pointer; color:#d9985f; font-size:14px; line-height:1.6; }
.av-account-nav .av-account-nav__help { margin-top:12px; color:#d9985f; }
.av-account-nav a:focus-visible,.av-account-nav summary:focus-visible { outline:3px solid #b87333; outline-offset:3px; }
.av-hub.container { max-width:1240px; margin:0 auto 48px; text-align:start; color:#111111; }
.av-hub * { box-sizing:border-box; }
.av-hub .av-hub__layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:26px; align-items:start; }
.av-hub #content.av-hub__content { width:100%; min-width:0; padding:28px; border:1px solid #e8e8e8; border-radius:18px; background:#ffffff; }
.av-hub .av-hub__intro { font-size:15px; line-height:1.85; color:#111111; margin:0 0 26px; }
.av-hub .av-hub__note { color:#8c5a28; font-size:13px; line-height:1.7; margin:20px 0; }
.av-hub .av-hub__button { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:12px 18px; min-height:46px; line-height:1.5; border:1px solid #111111; border-radius:10px; background:#111111; color:#ffffff; font-size:14px; text-decoration:none; font-weight:600; }
.av-hub .av-hub__button:hover { background:#8c5a28; border-color:#8c5a28; }
.av-hub .av-hub__button--quiet { background:#ffffff; color:#111111; border-color:#e8e8e8; }
.av-hub .av-hub__empty { padding:28px 20px; border:1px dashed #e8e8e8; border-radius:12px; line-height:1.8; margin-bottom:20px; }
.av-hub .av-hub__table-scroll { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; margin:0 0 20px; }
.av-hub .av-hub__table-scroll .av-hub__table-scroll { margin-bottom:0; }
.av-hub .table-responsive { width:100%; max-width:100%; margin-bottom:0; border:0; }
.av-hub table { margin-bottom:0; color:#111111; }
.av-hub table td,.av-hub table th { vertical-align:top; padding:14px; line-height:1.7; }
.av-hub .table-order { min-width:640px; }
.av-hub .table-order td:last-child a { margin:3px; }
.av-hub .buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid #e8e8e8; }
.av-hub .buttons::before,.av-hub .buttons::after { content:normal; }
.av-hub .buttons .pull-left,.av-hub .buttons .pull-right { float:none; max-width:100%; }
.av-hub .buttons .btn { min-height:46px; white-space:normal; }
.av-hub form { margin:0; max-width:100%; }
.av-hub form fieldset,#account-address.av-hub form #address { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 20px; min-width:0; padding:0; margin:0 0 24px; border:0; }
.av-hub form legend { grid-column:1/-1; font-size:19px; line-height:1.5; font-weight:600; margin:0 0 2px; padding:0 0 12px; color:#111111; }
.av-hub .form-group { --input-group-spacing:0px; display:block; min-width:0; margin:0; padding:0; }
.av-hub form > .form-group { margin-bottom:20px; }
.av-hub .form-group:only-child,.av-hub .custom-field,.av-hub .form-group:has(textarea) { grid-column:1/-1; }
.av-hub .form-group .control-label { display:block; float:none; width:auto; padding:0; margin:0 0 9px; text-align:start; line-height:1.6; font-size:14px; font-weight:600; }
.av-hub .form-group .col-sm-10 { width:100%; float:none; padding:0; min-width:0; }
.av-hub .av-hub-control { display:block; width:100%; min-width:0; max-width:100%; height:50px; padding:10px 13px; border:1px solid #e8e8e8; border-radius:10px; background:#ffffff; color:#111111; font:inherit; font-size:16px; line-height:1.5; box-shadow:none; }
.av-hub select.av-hub-control { --j-font_size-font-size-400:16px; }
.av-hub textarea.av-hub-control { min-height:120px; height:auto; resize:vertical; }
.av-hub input[type="email"],.av-hub input[type="tel"] { direction:ltr; text-align:left; }
.av-hub .av-hub-control:focus { border-color:#b87333; outline:2px solid #b87333; outline-offset:2px; }
.av-hub .input-group { display:flex; width:100%; }
.av-hub .input-group .av-hub-control { flex:1; }
.av-hub .input-group-btn { width:auto; }
.av-hub .radio-inline { display:inline-flex; gap:8px; align-items:center; min-height:44px; margin:0 16px 0 0; padding:0; position:static; }
.av-hub .radio-inline input { position:static; margin:0; }
.av-hub .text-danger { display:block; margin-top:8px; line-height:1.7; font-size:13px; }
.av-hub .pagination-results { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 0; }
.av-hub .pagination-results > div { padding:0; width:auto; max-width:100%; }
.av-hub a:focus-visible,.av-hub button:focus-visible { outline:3px solid #b87333; outline-offset:4px; }
.av-order-list,.av-address-list { display:grid; gap:16px; }
.av-order-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.av-order-card,.av-address-card { border:1px solid #e8e8e8; border-radius:14px; padding:22px; }
.av-order-card__heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.av-order-card__heading h2 { font-size:19px; line-height:1.5; margin:0; color:#111111; }
.av-order-card__status { border:1px solid #b87333; color:#8c5a28; border-radius:20px; padding:5px 12px; font-size:12px; line-height:1.5; }
.av-order-card dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.av-order-card dl div { min-width:0; }
.av-order-card dt { color:#8c5a28; font-size:12px; font-weight:400; margin-bottom:6px; }
.av-order-card dd { margin:0; font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.av-address-card__text { line-height:1.9; overflow-wrap:anywhere; }
.av-address-card__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
@media (max-width:900px) {
.av-order-list { grid-template-columns:1fr; }
.av-hub .av-hub__layout { grid-template-columns:220px minmax(0,1fr); gap:18px; }
.av-hub #content.av-hub__content { padding:22px; }
.av-hub form fieldset,#account-address.av-hub form #address { grid-template-columns:1fr; }
}
@media (max-width:767px) {
.av-hub.container { padding-inline:16px; }
.av-hub .av-hub__layout { grid-template-columns:1fr; gap:18px; }
.av-hub #content.av-hub__content { padding:20px 16px; border-radius:14px; }
.av-account-nav { padding:20px 16px; border-radius:14px; }
.av-account-nav h2 { font-size:20px; margin-bottom:16px; }
.av-account-nav__main,.av-account-nav__more { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.av-account-nav nav a { padding:10px; font-size:13px; }
.av-order-card,.av-address-card { padding:18px 14px; }
.av-order-card dl { grid-template-columns:1fr 1fr; }
.av-order-card dl div:last-child { grid-column:1/-1; }
.av-order-card .av-hub__button { width:100%; }
.av-hub .buttons { gap:12px; }
.av-hub .buttons .pull-left,.av-hub .buttons .pull-right { width:100%; }
.av-hub .buttons .btn { display:flex; justify-content:center; width:100%; }
}
/* Arabiva signature motion: one short entrance, then a quiet resting state. */
.av-account .av-account-signature > svg { transform-origin:center; transition:transform .35s ease; }
.av-account .av-account-orbit { pointer-events:none; }
.av-account .av-account-orbit::before { border-inline-start-color:#b87333; }
.av-account .av-account-orbit::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#d9985f; top:-3px; left:calc(50% - 2.5px); box-shadow:0 0 10px rgb(217 152 95 / 45%); }
@media (min-width:768px) {
.av-account .av-account-orbit { top:calc(50% - 107px); }
}
@media (max-width:767px) {
.av-account .av-account-orbit { width:55px; height:55px; top:6px; inset-inline-start:-15px; inset-inline-end:auto; }
.av-account .av-account-orbit::before { inset:8px; }
}
@media (prefers-reduced-motion:no-preference) {
.av-account .av-account-signature > svg { animation:av-signature-spark 4.8s ease-in-out; }
.av-account .av-account-orbit { animation:av-signature-orbit 4.8s cubic-bezier(.22,.61,.36,1); }
.av-account .av-account-orbit::before { animation:av-signature-inner 4.8s cubic-bezier(.22,.61,.36,1); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
.av-account .av-account-signature:hover > svg { transform:translateY(-3px) rotate(5deg); }
}
@media (prefers-reduced-motion:reduce) {
.av-account .av-account-signature > svg { transition:none; }
}
@keyframes av-signature-spark {
0%,100% { transform:translateY(0) rotate(0) scale(1); }
30% { transform:translateY(-6px) rotate(8deg) scale(1.05); }
65% { transform:translateY(-2px) rotate(-4deg) scale(1.02); }
}
@keyframes av-signature-orbit {
0% { transform:rotate(0) scale(.9); opacity:.35; }
35% { opacity:1; }
100% { transform:rotate(360deg) scale(1); opacity:1; }
}
@keyframes av-signature-inner {
from { transform:rotate(0); }
to { transform:rotate(-360deg); }
}
/* Site motion: decorative surfaces only; forms, labels and checkout stay still. */
@media (prefers-reduced-motion:no-preference) {
.av-motion-enter { animation:av-image-arrive .7s cubic-bezier(.22,.61,.36,1) backwards; }
.av-market-art.av-motion-enter { animation:av-brand-drift 4.6s ease-in-out; }
.av-mzb .av-mizan-play .av-mzb-knob { animation:av-mizan-explore 4.8s cubic-bezier(.45,0,.25,1); }
.av-mzb .av-mizan-play .av-mzb-knob::after { animation:av-mizan-ripple 2.3s ease-out 2; }
.av-mzb .av-mizan-play .av-mzb-d { animation:av-mizan-dot 4.2s ease-in-out; }
.av-mzb .av-mizan-play .av-mzb-d:nth-of-type(3n+1) { animation-delay:.15s; }
.av-mzb .av-mizan-play .av-mzb-d:nth-of-type(3n+2) { animation-delay:.3s; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
.product-thumb .product-img,.category-thumb .image > a { transition:transform .35s ease; transform-origin:center; }
.product-thumb:hover .product-img,.category-thumb:hover .image > a { transform:scale(1.025); }
.av-account .av-account-shortcut .av-account-icon { transition:transform .3s ease; }
.av-account .av-account-shortcut:hover .av-account-icon { transform:translateY(-2px) rotate(-4deg); }
.av-market-cta > span,.av-story-button > svg { display:inline-block; transition:transform .25s ease; }
.av-market-cta:hover > span,.av-story-button:hover > svg { transform:translateY(-2px); }
}
@keyframes av-image-arrive {
from { transform:translateY(10px) scale(.985); }
to { transform:translateY(0) scale(1); }
}
@keyframes av-brand-drift {
0%,100% { transform:translateY(0) scale(1); }
45% { transform:translateY(-5px) scale(1.018); }
}
@keyframes av-mizan-explore {
0%,100% { transform:translate(0,0); }
23% { transform:translate(26px,16px); }
48% { transform:translate(-28px,26px); }
73% { transform:translate(-16px,-20px); }
}
@keyframes av-mizan-ripple {
from { transform:scale(.9); opacity:.8; }
to { transform:scale(1.65); opacity:0; }
}
@keyframes av-mizan-dot {
0%,100% { transform:scale(1); opacity:1; }
35% { transform:scale(1.35); opacity:.55; }
70% { transform:scale(.9); opacity:.85; }
}
/* ARABIVA ADMIN ORDER LIST START */
#content.av-orders-page { color:#111111; }
#content.av-orders-page,#content.av-orders-page * { box-sizing:border-box; }
.av-orders-page .av-orders-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.av-orders-page .av-orders-heading h1 { color:#111111; font-size:26px; font-weight:700; margin:0 0 7px; }
.av-orders-page .av-orders-heading p { margin:0; color:#666666; }
.av-orders-page .av-orders-actions { display:flex; gap:8px; flex-wrap:wrap; }
.av-orders-page .btn { border-radius:8px; padding:10px 14px; min-height:40px; }
.av-orders-page .btn-primary { color:#ffffff; background:#111111; border-color:#111111; }
.av-orders-page .btn-primary:hover { color:#ffffff; background:#8c5a28; border-color:#8c5a28; }
.av-orders-page .btn-default { background:#ffffff; border-color:#e8e8e8; color:#111111; }
.av-orders-page a:focus-visible,.av-orders-page button:focus-visible,.av-orders-page summary:focus-visible { outline:2px solid #b87333; outline-offset:3px; }
.av-orders-page .av-orders-filters,.av-orders-page .av-orders-results { background:#ffffff; border:1px solid #e8e8e8; border-radius:14px; padding:20px; margin-bottom:20px; }
.av-orders-page .av-orders-results { container-type:inline-size; }
.av-orders-page .av-orders-select-all { margin:0; display:flex; align-items:center; gap:7px; }
.av-orders-page #av-select-all { width:18px; height:18px; accent-color:#8c5a28; }
.av-orders-page .av-orders-filter-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.av-orders-page .form-group { margin:0; padding:0; min-width:0; }
.av-orders-page .form-control { min-width:0; width:100%; height:42px; border:1px solid #dddddd; border-radius:7px; color:#111111; }
.av-orders-page .form-control:focus { border-color:#b87333; box-shadow:0 0 0 2px rgba(184,115,51,.12); }
.av-orders-page label { font-size:12px; margin-bottom:7px; }
.av-orders-page .av-orders-advanced { border-top:1px solid #e8e8e8; margin-top:18px; padding-top:14px; }
.av-orders-page summary { cursor:pointer; color:#8c5a28; font-weight:600; }
.av-orders-page .av-orders-advanced[open] > summary { margin-bottom:16px; }
.av-orders-page .av-orders-filter-actions { display:flex; gap:8px; margin-top:18px; }
.av-orders-page .av-orders-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.av-orders-page .av-orders-result-head h2 { font-size:16px; margin:0; }
.av-orders-page .av-orders-result-head h2 strong { font-size:28px; color:#8c5a28; margin-inline-end:7px; }
.av-orders-page #av-selection-count { color:#666666; font-size:12px; }
.av-orders-page .av-orders-note { font-size:12px; color:#666666; line-height:1.65; margin:10px 0; }
.av-orders-page .av-orders-table-wrap { overflow-x:auto; }
.av-orders-page .av-orders-table { width:100%; min-width:1100px; table-layout:fixed; border-collapse:separate; border-spacing:0 10px; margin:8px 0; line-height:1.6; }
.av-orders-page .av-orders-table thead th { text-align:start; font-size:11px; color:#666666; border:0; padding:8px; }
.av-orders-page .av-orders-table thead th a { color:#8c5a28; }
.av-orders-page .av-orders-table td { background:#ffffff; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; vertical-align:top; padding:14px 10px; overflow-wrap:anywhere; white-space:normal; }
.av-orders-page .av-orders-table td:first-child { border-inline-start:1px solid #e8e8e8; border-start-start-radius:10px; border-end-start-radius:10px; }
.av-orders-page .av-orders-table td:last-child { border-inline-end:1px solid #e8e8e8; border-start-end-radius:10px; border-end-end-radius:10px; }
.av-orders-page .av-orders-table tr:has(input[name="selected[]"]:checked) td { background:#fffaf6; border-color:#b87333; }
.av-orders-page .av-orders-table th:nth-child(1) { width:38px; }
.av-orders-page .av-orders-table th:nth-child(2) { width:14%; }
.av-orders-page .av-orders-table th:nth-child(3) { width:18%; }
.av-orders-page .av-orders-table th:nth-child(4) { width:20%; }
.av-orders-page .av-orders-table th:nth-child(8) { width:130px; }
.av-orders-page .av-orders-table input[type="checkbox"] { width:18px; height:18px; accent-color:#8c5a28; cursor:pointer; }
.av-orders-page .av-order-number { font-size:16px; font-weight:700; color:#8c5a28; }
.av-orders-page .av-order-customer { margin-top:6px; font-weight:600; }
.av-orders-page .av-orders-table small { display:block; color:#666666; font-size:11px; line-height:1.6; margin-top:3px; }
.av-orders-page .av-order-country { font-weight:600; margin-top:10px; }
.av-orders-page .av-order-badge { display:table; border:1px solid #e8e8e8; color:#8c5a28; border-radius:5px; padding:2px 7px; font-size:10px; margin-top:4px; }
.av-orders-page .av-order-product { margin-top:8px; }
.av-orders-page .av-orders-table details { margin-top:9px; }
.av-orders-page .av-orders-table details ul { margin:8px 0 0; padding-inline-start:16px; }
.av-orders-page .av-order-status { display:inline-block; border:1px solid #e8e8e8; border-radius:6px; padding:4px 7px; font-size:11px; font-weight:600; }
.av-orders-page .av-order-total { display:block; font-size:15px; margin-top:9px; }
.av-orders-page .av-orders-table .av-order-spaced { margin-top:11px; }
.av-orders-page .av-order-action .btn { padding:9px 10px; }
.av-orders-page .av-order-action .btn-group { display:inline-flex; }
.av-orders-page .av-order-action .dropdown-menu { position:static; float:none; min-width:0; width:100%; margin-top:4px; box-shadow:none; }
.av-orders-page .av-order-action .btn-group.open { flex-wrap:wrap; }
.av-orders-page .av-order-action .dropdown-menu a { padding:9px 12px; }
.av-orders-page .av-orders-pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.av-orders-page .av-order-mobile-label { display:none; }
.av-orders-page .av-order-empty { padding:45px 16px; text-align:center; }
@media (max-width:1400px) { .av-orders-page .av-orders-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (max-width:1150px) {
.av-orders-page .av-orders-table { min-width:0; display:block; }
.av-orders-page .av-orders-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.av-orders-page .av-orders-table tbody { display:grid; gap:14px; }
.av-orders-page .av-orders-table tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #e8e8e8; border-radius:10px; padding:8px; }
.av-orders-page .av-orders-table td { border:0; min-width:0; padding:10px; }
.av-orders-page .av-orders-table td:first-child,.av-orders-page .av-orders-table td:last-child { border:0; }
.av-orders-page .av-order-select { grid-column:1 / -1; }
.av-orders-page .av-order-mobile-label { display:block; color:#666666; font-size:10px; margin-bottom:6px; }
.av-orders-page .av-order-empty { grid-column:1 / -1; }
.av-orders-page .av-orders-table td[colspan] { grid-column:1 / -1; }
}
@media (max-width:700px) {
.av-orders-page .av-orders-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.av-orders-page .av-orders-table tbody tr { grid-template-columns:repeat(2,minmax(0,1fr)); }
.av-orders-page .av-orders-filters,.av-orders-page .av-orders-results { padding:14px; }
.av-orders-page .form-control { font-size:16px; }
}
@media (max-width:420px) {
.av-orders-page .av-orders-filter-grid,.av-orders-page .av-orders-table tbody tr { grid-template-columns:minmax(0,1fr); }
.av-orders-page .av-orders-actions { width:100%; }
.av-orders-page .av-orders-actions .btn { flex:1 1 auto; }
}
/* Admin semantic status accents requested by owner; storefront branding is unchanged. */
:is(.av-orders-page,.av-order-detail-page) .av-order-status { display:inline-flex;align-items:center;gap:5px;border:1px solid #d5d5d5;border-radius:6px;padding:5px 9px;font-size:12px;font-weight:700;line-height:1.5;color:#444444;background:#f5f5f5; }
:is(.av-orders-page,.av-order-detail-page) .av-status-success { color:#14613d;background:#eaf7ef;border-color:#b7dfc8; }
:is(.av-orders-page,.av-order-detail-page) .av-status-danger { color:#a52232;background:#fff0f2;border-color:#f0bdc5; }
:is(.av-orders-page,.av-order-detail-page) .av-status-warning { color:#855100;background:#fff6df;border-color:#edcf8c; }
.av-orders-page .av-orders-table .av-row-success td:first-child { border-inline-start:3px solid #238552; }
.av-orders-page .av-orders-table .av-row-danger td:first-child { border-inline-start:3px solid #bd3547; }
.av-orders-page .av-orders-table .av-row-warning td:first-child { border-inline-start:3px solid #bd841c; }
.av-orders-page .av-status-legend { display:flex;gap:8px;flex-wrap:wrap;margin-block:14px; }
.av-order-detail-page { color:#111111; }
.av-order-detail-page .av-order-overview,.av-order-detail-page .av-order-overview * { box-sizing:border-box; }
.av-order-detail-page .av-detail-hero,.av-order-detail-page .av-customer-panel { border:1px solid #e8e8e8;border-radius:14px;background:#ffffff;padding:24px;margin-block-end:20px; }
.av-order-detail-page .av-detail-hero { border-top:3px solid #b87333; }
.av-order-detail-page .av-detail-heading { display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; }
.av-order-detail-page .av-detail-heading h2 { margin:4px 0 8px;font-size:22px;font-weight:700;line-height:1.4;color:#111111; }
.av-order-detail-page .av-detail-heading p,.av-order-detail-page .av-detail-note { color:#666666;font-size:12px;line-height:1.7; }
.av-order-detail-page .av-detail-eyebrow { color:#8c5a28;font-size:11px;font-weight:700; }
.av-order-detail-page .av-detail-facts,.av-order-detail-page .av-customer-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-block:20px; }
.av-order-detail-page .av-detail-facts > div,.av-order-detail-page .av-customer-metrics > div,.av-order-detail-page .av-customer-values > div { min-width:0;overflow-wrap:anywhere; }
.av-order-detail-page .av-order-overview span,.av-order-detail-page .av-order-overview small { line-height:1.6; }
.av-order-detail-page .av-detail-facts > div > span,.av-order-detail-page .av-customer-values > div > span { display:block;color:#666666;font-size:12px;margin-bottom:6px; }
.av-order-detail-page .av-detail-facts strong { display:block;font-size:17px;line-height:1.6; }
.av-order-detail-page .av-detail-facts small,.av-order-detail-page .av-customer-order small { display:block;color:#666666;font-size:12px;margin-top:5px; }
.av-order-detail-page .av-detail-dates { display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#666666;border-top:1px solid #e8e8e8;padding-top:14px; }
.av-order-detail-page .av-detail-shortcuts { display:flex;gap:8px;flex-wrap:wrap;margin-top:16px; }
.av-order-detail-page .av-detail-shortcuts a,.av-order-detail-page .av-detail-open,.av-order-detail-page .av-customer-pagination a { color:#8c5a28;background:#ffffff;border:1px solid #e8e8e8;border-radius:7px;padding:10px 13px;min-height:40px;display:inline-flex;align-items:center;gap:8px;font-weight:600; }
.av-order-detail-page .av-order-overview a:hover { color:#111111;border-color:#b87333;text-decoration:none; }
.av-order-detail-page .av-order-overview a:focus-visible,.av-order-detail-page .av-order-overview summary:focus-visible { outline:2px solid #b87333;outline-offset:3px; }
.av-order-detail-page .av-customer-type { background:#fbf3eb;border:1px solid #ead5c1;border-radius:20px;padding:6px 12px;color:#8c5a28;font-size:12px; }
.av-order-detail-page .av-customer-metrics > div { border:1px solid #e8e8e8;border-radius:10px;padding:16px; }
.av-order-detail-page .av-customer-metrics strong { display:block;font-size:32px;line-height:1.3;margin-block:8px; }
.av-order-detail-page .av-customer-metrics small { display:block;color:#666666; }
.av-order-detail-page .av-metric-success strong { color:#14613d; }
.av-order-detail-page .av-metric-warning strong { color:#855100; }
.av-order-detail-page .av-metric-danger strong { color:#a52232; }
.av-order-detail-page .av-customer-values { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:18px;background:#fafafa;border-radius:10px; }
.av-order-detail-page .av-customer-values strong { display:block;font-size:16px;margin-bottom:8px; }
.av-order-detail-page .av-customer-values small { color:#666666;font-size:11px;font-weight:400; }
.av-order-detail-page .av-customer-history { border-top:1px solid #e8e8e8;margin-top:20px;padding-top:15px;scroll-margin-top:65px; }
.av-order-detail-page .av-customer-history h3 { font-size:17px;margin:5px 0 16px; }
.av-order-detail-page .av-customer-history h3 span { color:#8c5a28; }
.av-order-detail-page .av-customer-order { display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:20px;align-items:start;border:1px solid #e8e8e8;border-inline-start-width:3px;border-radius:10px;padding:16px;margin-top:10px; }
.av-order-detail-page .av-customer-order > div { min-width:0;overflow-wrap:anywhere; }
.av-order-detail-page .av-customer-order.av-row-success { border-inline-start-color:#238552; }
.av-order-detail-page .av-customer-order.av-row-danger { border-inline-start-color:#bd3547; }
.av-order-detail-page .av-customer-order.av-row-warning { border-inline-start-color:#bd841c; }
.av-order-detail-page .av-customer-order-link { color:#8c5a28;font-size:18px;font-weight:700; }
.av-order-detail-page .av-customer-order .av-order-status { margin-top:8px; }
.av-order-detail-page .av-customer-order p { margin:5px 0;font-size:13px; }
.av-order-detail-page .av-customer-order summary { cursor:pointer;color:#8c5a28;font-size:12px; }
.av-order-detail-page .av-customer-empty { padding:25px;text-align:center;background:#fafafa;border-radius:10px;color:#666666; }
.av-order-detail-page .av-customer-pagination { display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px; }
.av-order-detail-page #av-order-products,.av-order-detail-page #av-order-status-history { scroll-margin-top:65px; }
@media(max-width:1100px) { .av-order-detail-page .av-detail-facts,.av-order-detail-page .av-customer-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .av-order-detail-page .av-customer-order { grid-template-columns:1fr 1fr; } .av-order-detail-page .av-customer-values { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .av-order-detail-page .av-detail-hero,.av-order-detail-page .av-customer-panel { padding:15px; } .av-order-detail-page .av-detail-heading h2 { font-size:19px; } .av-order-detail-page .av-detail-facts,.av-order-detail-page .av-customer-metrics { gap:10px; } .av-order-detail-page .av-customer-metrics > div { padding:12px; } .av-order-detail-page .av-customer-values { grid-template-columns:1fr; } .av-order-detail-page .av-customer-order { gap:12px; } .av-order-detail-page .av-customer-order > div:nth-child(3) { grid-column:1/-1; } .av-order-detail-page .av-detail-open { grid-column:1/-1;justify-content:center; } }
/* ARABIVA ADMIN ORDER LIST END */
/* ARABIVA MIZAN PAGE START */
/* الميزان v1.0.0 — Arabiva house palette: black #111111 / white #ffffff / copper #b87333 */
.av-mz-page{padding:24px 15px 60px;background:#ffffff}
.av-mz-content{float:none;margin:0 auto}
.av-mz-lab{background:#111111;border-radius:18px;padding:34px;color:#ffffff;
display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px;align-items:start;
box-shadow:0 18px 44px rgba(17,17,17,.18)}
.av-mz-kick{display:block;color:#d9985f;font-size:10px;letter-spacing:4px;font-weight:800;margin-bottom:12px;text-transform:uppercase}
.av-mz-h1{font-size:38px;font-weight:800;line-height:1.25;margin:0 0 12px;color:#ffffff}
.av-mz-lede{color:#cfcfcf;font-size:14px;line-height:1.9;margin:0 0 22px}
/* ---- the balance field ---- */
.av-mz-pad{position:relative;width:100%;aspect-ratio:1/.82;min-height:260px;overflow:hidden;
border:1px solid rgba(184,115,51,.35);border-radius:14px;cursor:crosshair;touch-action:none;
background:radial-gradient(circle at var(--mz-gx,50%) var(--mz-gy,50%),rgba(184,115,51,.30),transparent 46%),#1a1a1a}
.av-mz-grid{position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:12.5% 12.5%}
.av-mz-cross{position:absolute;inset:0}
.av-mz-cross i{position:absolute;background:rgba(184,115,51,.25)}
.av-mz-cross i.h{inset-inline:0;top:50%;height:1px}
.av-mz-cross i.v{inset-block:0;inset-inline-start:50%;width:1px}
.av-mz-dots{position:absolute;inset:0;pointer-events:none}
.av-mz-dot{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;
background:rgba(255,255,255,.28);transition:background .2s,box-shadow .2s}
.av-mz-dot.is-near{background:#d9985f;box-shadow:0 0 0 4px rgba(184,115,51,.20)}
.av-mz-knob{position:absolute;width:30px;height:30px;margin:-15px;border-radius:50%;pointer-events:none;
background:#b87333;border:3px solid #ffffff;box-shadow:0 6px 20px rgba(0,0,0,.55)}
.av-mz-knob::after{content:"";position:absolute;inset:-14px;border:1px solid rgba(184,115,51,.5);border-radius:50%}
/* Axis poles read as labels on the field, not as fine print: a solid chip
with a copper edge, sized so they survive the dot field behind them. */
.av-mz-axis{position:absolute;pointer-events:none;display:flex;align-items:center;gap:6px;
background:rgba(10,10,10,.82);border:1px solid rgba(184,115,51,.55);border-radius:999px;
padding:7px 14px;color:#ffffff;font-size:15px;font-weight:700;letter-spacing:.4px;line-height:1;
white-space:nowrap;backdrop-filter:blur(2px)}
.av-mz-axis em{font-style:normal;color:#d9985f;font-size:13px;font-weight:700}
.av-mz-axis.is-start{top:50%;inset-inline-start:10px;transform:translateY(-50%)}
.av-mz-axis.is-end{top:50%;inset-inline-end:10px;transform:translateY(-50%)}
.av-mz-axis.is-top{top:10px;inset-inline-start:50%;transform:translateX(-50%)}
.av-mz-axis.is-bottom{bottom:10px;inset-inline-start:50%;transform:translateX(-50%)}
.av-mz-readout{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.av-mz-tag{border:1px solid rgba(184,115,51,.5);border-radius:999px;padding:7px 14px;font-size:12px;color:#f0d9c2}
.av-mz-tag b{color:#d9985f;font-weight:800}
.av-mz-reset{background:none;border:0;color:#9a9a9a;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:0}
.av-mz-reset:hover{color:#d9985f}
.av-mz-seed{margin:12px 0 0;color:#8f8f8f;font-size:11px;letter-spacing:1px}
.av-mz-seed b{color:#d9985f}
/* ---- occasion chips ---- */
.av-mz-when{margin-top:4px}
.av-mz-when-label{display:block;font-size:10px;letter-spacing:3px;color:#d9985f;font-weight:800;margin-bottom:11px}
.av-mz-chips{display:flex;gap:8px;flex-wrap:wrap}
.av-mz-chip{background:transparent;border:1px solid #3a3a3a;color:#dddddd;border-radius:999px;
padding:9px 17px;font:inherit;font-size:13px;cursor:pointer;transition:.15s}
.av-mz-chip:hover{border-color:#b87333;color:#ffffff}
.av-mz-chip.is-on{background:#b87333;border-color:#b87333;color:#ffffff;font-weight:700}
/* ---- demoted name search ---- */
/* Note search — the taxonomy the constellations are drawn from, used as a
filter. Arabic spellings are in the same vocabulary, so "عود" and "oud"
land on one note. */
.av-mz-notes{margin:0 0 14px}
.av-mz-hub{margin:38px 0 0;padding-top:26px;border-top:1px solid #ece6de}
.av-mz-hub h2{margin:0 0 6px;font-size:19px;color:#111}
.av-mz-hub-lede{margin:0 0 18px;font-size:13px;color:#6b6b6b}
.av-mz-hub-fam{margin:0 0 16px}
.av-mz-hub-fam h3{
margin:0 0 7px;
font-size:11px;
letter-spacing:.15em;
text-transform:uppercase;
color:#b87333;
font-weight:600;
}
.av-mz-hub-notes{display:flex;flex-wrap:wrap;gap:6px}
.av-mz-hub-notes a{
display:inline-block;
padding:4px 10px;
border:1px solid #e6e0d8;
border-radius:999px;
font-size:12.5px;
color:#111;
text-decoration:none;
transition:border-color .18s ease,background .18s ease;
}
.av-mz-hub-notes a:hover{border-color:#b87333;background:#fdfaf6;text-decoration:none}
.av-mz-hub-notes i{font-style:normal;opacity:.45;font-size:11px}
.av-mz-kin{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin:22px 0 8px;
padding-top:18px;
border-top:1px solid #ece6de;
}
.av-mz-kin-label{
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:#6b6b6b;
}
.av-mz-kin .av-mz-chip{text-decoration:none}
.av-mz-kin .av-mz-chip i{font-style:normal;opacity:.55;font-size:11px}
.av-mz-noteq{
width:100%;
max-width:340px;
margin:6px 0 8px;
padding:9px 12px;
border:1px solid #d8d2c8;
border-radius:10px;
background:#fff;
color:#111;
font:inherit;
font-size:13.5px;
}
.av-mz-noteq:focus{outline:none;border-color:#b87333}
.av-mz-noteq.is-bad{border-color:#c0653a;background:#fdf6f2}
.av-mz-mark{
position:absolute;
inset-inline-end:-5px;
bottom:-5px;
width:24px;
height:24px;
border-radius:50%;
box-shadow:0 0 0 2px #fff,0 1px 3px rgba(17,17,17,.25);
}
.av-mz-mini{position:relative}
.av-mz-byname{margin-top:26px;border-top:1px solid #2a2a2a;padding-top:18px}
.av-mz-byname-toggle{background:none;border:0;color:#d9985f;font:inherit;font-size:13px;cursor:pointer;
padding:0;text-decoration:underline;text-underline-offset:5px}
.av-mz-byname-field{display:none;gap:8px;margin-top:14px}
.av-mz-byname-field.is-open{display:flex}
.av-mz-byname-field input{flex:1;min-width:0;background:#ffffff;border:0;border-radius:999px;
padding:13px 18px;font:inherit;font-size:14px;color:#111111;outline:none}
.av-mz-byname-field input:focus{box-shadow:0 0 0 3px rgba(184,115,51,.35)}
.av-mz-byname-go{background:#b87333;color:#ffffff;border:0;border-radius:999px;padding:13px 22px;
font:inherit;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.av-mz-byname-go:hover{background:#d9985f}
/* ---- results ---- */
.av-mz-reshead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin:44px 0 0;border-bottom:1px solid #e8e8e8;padding-bottom:14px}
.av-mz-reshead h2{font-size:24px;font-weight:800;margin:0;color:#111111}
.av-mz-reshead em{font-style:normal;color:#6b6b6b;font-size:13px}
.av-mz-row{display:grid;grid-template-columns:52px 72px minmax(0,1fr) auto;gap:18px;align-items:center;
padding:18px 4px;border-bottom:1px solid #e8e8e8;text-decoration:none;color:#111111;transition:background .15s}
.av-mz-row:hover{background:#faf7f2;text-decoration:none;color:#111111}
.av-mz-rank{font-size:11px;color:#9a9a9a;letter-spacing:1px;text-align:center}
.av-mz-rank b{display:block;font-size:26px;font-weight:800;color:#111111;line-height:1}
.av-mz-mini{position:relative;width:72px;height:58px;border-radius:8px;background:#f4f4f4;border:1px solid #e8e8e8;overflow:hidden}
.av-mz-mini img{width:100%;height:100%;object-fit:cover}
.av-mz-mini i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#b87333;z-index:2}
.av-mz-mini::before,.av-mz-mini::after{content:"";position:absolute;background:rgba(0,0,0,.10)}
.av-mz-mini::before{inset-inline:0;top:50%;height:1px}
.av-mz-mini::after{inset-block:0;inset-inline-start:50%;width:1px}
.av-mz-meta{min-width:0}
.av-mz-meta h3{margin:0 0 5px;font-size:18px;font-weight:800;color:#111111}
.av-mz-fam{font-size:12px;color:#b87333;font-weight:700;letter-spacing:.4px}
.av-mz-near{font-size:12.5px;color:#6b6b6b;margin:6px 0 0}
.av-mz-near b{color:#111111;font-weight:700}
.av-mz-buy{text-align:end;white-space:nowrap}
.av-mz-price{display:block;font-size:17px;font-weight:800;color:#111111}
.av-mz-price i{font-style:normal;font-size:12px;font-weight:600;color:#6b6b6b}
.av-mz-size{display:inline-block;margin-inline-start:6px;background:#f3ece4;color:#8c5a28;
border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;vertical-align:middle}
.av-mz-cta{font-size:11px;color:#b87333;letter-spacing:1.5px;font-weight:800;text-transform:uppercase}
.av-mz-flag{display:inline-block;margin-inline-start:8px;background:#b87333;color:#ffffff;border-radius:999px;
padding:3px 9px;font-size:10px;font-weight:800;vertical-align:middle}
.av-mz-none{padding:40px;text-align:center;color:#6b6b6b;background:#fafafa;border:1px solid #e8e8e8;border-radius:12px;margin-top:20px}
@media (max-width:820px){
.av-mz-page{padding:16px 10px 36px}
.av-mz-lab{grid-template-columns:1fr;padding:24px 18px;gap:26px}
.av-mz-h1{font-size:28px}
.av-mz-reshead{margin-top:32px}
.av-mz-reshead h2{font-size:20px}
/* A price cell in its own auto column crushed the name to 109px and every
line wrapped, so the price moves under the text instead. */
.av-mz-row{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px 2px;align-items:start}
.av-mz-rank{display:none}
.av-mz-mini{width:56px;height:56px}
.av-mz-meta h3{font-size:15px;line-height:1.35}
.av-mz-fam{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-mz-near{margin-top:3px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-mz-buy{grid-column:2;text-align:start;margin-top:6px}
.av-mz-price{display:inline;font-size:15px}
.av-mz-cta{display:none}
.av-mz-axis{font-size:13px;padding:5px 11px}
/* Text buttons need a real touch target, not just their text box. */
.av-mz-byname-toggle{display:inline-block;padding:11px 0;min-height:44px}
.av-mz-reset{padding:12px 4px;min-height:44px}
}
/* Mizan interaction: motion never changes a perfume's semantic coordinates. */
.av-mz-pad:focus-visible { outline:2px solid #d9985f;outline-offset:5px; }
.av-mz-fieldwrap { min-width:0; }
.av-mz-pad .av-mz-dot { transition:opacity .25s,background .25s,box-shadow .25s;pointer-events:auto; }
.av-mz-dot.is-filtered { opacity:.10;pointer-events:none; }
.av-mz-dot.is-near { z-index:1; }
.av-mz-knob { z-index:2;transition:inset-inline-start .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1); }
.av-mz-pad.is-dragging .av-mz-knob,.av-mz-pad.is-touring .av-mz-knob { transition:none; }
.av-mz-axis { z-index:3; }
.av-mz-axis.is-top:dir(rtl),.av-mz-axis.is-bottom:dir(rtl) { transform:translateX(50%); }
.av-mz-pad.is-entering .av-mz-dot { animation:av-mz-arrive .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--mz-delay,0ms); }
.av-mz-pad.is-entering .av-mz-dot.is-filtered { animation:none; }
.av-mz-pad.is-entering .av-mz-knob::after,.av-mz-pad.is-settling .av-mz-knob::after { animation:av-mz-ripple .8s ease-out; }
.av-mz-tools { display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px; }
.av-mz-tour { border:1px solid #b87333;background:transparent;color:#f0d9c2;border-radius:999px;font:inherit;font-size:12px;font-weight:700;padding:10px 16px;min-height:42px;cursor:pointer; }
.av-mz-tour:hover { color:#ffffff;background:#8c5a28; }
.av-mz-tour:focus-visible,.av-mz-chip:focus-visible { outline:2px solid #d9985f;outline-offset:3px; }
.av-mz-help,.av-mz-method { color:#bfbfbf;font-size:11px;line-height:1.7;margin:10px 0 0; }
.av-mz-method { padding-top:10px;border-top:1px solid #333333;max-width:72ch; }
.av-mz-row .av-mz-flag[hidden] { display:none; }
.av-mz-row { overflow-wrap:anywhere; }
@keyframes av-mz-arrive { from { opacity:0;transform:scale(.2); } to { opacity:1;transform:scale(1); } }
@keyframes av-mz-ripple { 0% { opacity:.8;transform:scale(.7); } 100% { opacity:0;transform:scale(2); } }
@media (prefers-reduced-motion:reduce) {
.av-mz-pad .av-mz-dot,.av-mz-pad .av-mz-knob { transition:none;animation:none; }
.av-mz-pad.is-entering .av-mz-dot,.av-mz-pad.is-entering .av-mz-knob::after,.av-mz-pad.is-settling .av-mz-knob::after { animation:none; }
}
.av-mz-pad.is-reduced .av-mz-dot,.av-mz-pad.is-reduced .av-mz-knob { animation:none;transition:none; }
.av-mz-pad.is-reduced .av-mz-knob::after { animation:none; }
/* ARABIVA MIZAN PAGE END */
/* All Over Spray: bilingual product stories and native Journal slide. */
.desktop .main-menu.main-menu-803:has(.aos-nav)>.j-menu>.menu-item>a{padding-inline:10px}
.aos-story{color:#111111;line-height:1.8;max-width:1180px;margin:0 auto;padding:24px 0;text-align:start}
.aos-story *{box-sizing:border-box}
.aos-story .aos-eyebrow{color:#8c5a28;font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 12px}
.aos-story h2{font-size:clamp(25px,3vw,40px);line-height:1.35;margin:0 0 18px;color:#111111}
.aos-story h3{font-size:21px;margin:30px 0 16px;color:#111111}
.aos-lead{font-size:17px;max-width:850px;margin:0 0 24px}
.aos-story .aos-accords{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 32px}
.aos-accords li{padding:6px 17px;border:1px solid #b87333;border-radius:100px;color:#8c5a28;background:#ffffff;font-weight:600}
.aos-pyramid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:16px 0}
.aos-pyramid>div{border-top:2px solid #b87333;padding:18px 0}
.aos-pyramid small{font-size:12px;font-weight:700;color:#8c5a28}
.aos-pyramid p{margin:10px 0 0;font-size:15px}
.aos-story .aos-note{font-size:13px;line-height:1.8;color:#555555;margin:16px 0}
.aos-story .aos-offer{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#111111;color:#ffffff;padding:30px;border-radius:16px;margin:30px 0}
.aos-offer small{color:#d9985f;font-size:12px;font-weight:700;letter-spacing:1px}
.aos-story .aos-offer h3{color:#ffffff;font-size:26px;margin:6px 0 8px}
.aos-story .aos-offer p{color:#ffffff;margin:0;font-size:14px}
.aos-story a.aos-cta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:48px;padding:12px 24px;background:#b87333;color:#111111;border:1px solid #b87333;border-radius:8px;text-decoration:none;font-weight:700;transition:background .2s}
.aos-story a.aos-cta:hover{background:#d9985f}
.aos-story a:focus-visible,.aos-story summary:focus-visible{outline:3px solid #b87333;outline-offset:4px}
.aos-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aos-story a.aos-choice{display:flex;flex-direction:column;align-items:center;border:1px solid #e8e8e8;border-radius:12px;padding:14px;text-align:center;text-decoration:none;color:#111111;transition:border-color .2s}
.aos-story a.aos-choice:hover{border-color:#b87333}
.aos-choice img{display:block;width:100%;height:auto;max-width:240px;aspect-ratio:1;object-fit:contain;border-radius:8px}
.aos-choice strong{font-size:19px;margin-top:12px}
.aos-choice span{font-size:13px;color:#555555;margin:5px 0 12px}
.aos-story details{border-block:1px solid #e8e8e8;margin-top:30px;padding:17px 0}
.aos-story summary{cursor:pointer;font-weight:700}
.aos-steps{display:flex;flex-wrap:wrap;gap:14px 34px;padding-inline-start:22px;margin:24px 0;color:#8c5a28;font-weight:700}
@media(max-width:767px){
.aos-story{padding:18px 0}.aos-lead{font-size:15px}.aos-pyramid{grid-template-columns:1fr;gap:0}
.aos-story .aos-offer{flex-direction:column;align-items:stretch;padding:22px;gap:16px}.aos-story .aos-offer h3{font-size:23px}
.aos-choices{gap:8px}.aos-story a.aos-choice{padding:6px}.aos-choice strong{font-size:16px}.aos-choice span{font-size:11px}
}
/* All Over Spray editorial stories — September 2026 */
.aos-art .aos-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:center;margin-bottom:36px}
.aos-art .aos-editorial>img{width:100%;height:auto;border-radius:160px 160px 12px 12px}
.aos-art .aos-editorial h2{font-size:clamp(26px,3vw,42px);line-height:1.35}
.aos-size{display:inline-block;padding:12px 0;border-block:1px solid #b87333;letter-spacing:2px;font-size:12px;margin:18px 0}
.aos-mood-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0}
.aos-mood-gallery figure{margin:0;min-width:0}
.aos-mood-gallery img{width:100%;height:auto;border-radius:100px 100px 8px 8px}
.aos-mood-gallery figure:nth-child(2){padding-top:38px}
.aos-mood-gallery figcaption{display:grid;gap:7px;padding:15px 4px}
.aos-mood-gallery figcaption strong{font-size:24px}
.aos-mood-gallery figcaption small{color:#8c5a28;letter-spacing:2px}
.aos-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:40px;align-items:center;background:#111111;color:#ffffff;padding:36px;border-radius:18px;margin:36px 0}
.aos-film h3{color:#ffffff;font-size:32px;line-height:1.4}
.aos-film .aos-note{color:#ffffff;opacity:.75}
.aos-film video{display:block;width:100%;height:auto;max-height:580px;border-radius:100px 100px 10px 10px;background:#111111}
.aos-pairings{padding:28px 0}
.aos-pairings>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aos-pairings article{border-top:2px solid #b87333;padding:20px 0}
.aos-pairings article strong{font-size:20px}
@media(max-width:767px){.aos-art .aos-editorial{grid-template-columns:1fr;gap:24px}.aos-mood-gallery{gap:10px}.aos-mood-gallery figcaption strong{font-size:18px}.aos-mood-gallery figcaption span{font-size:12px}.aos-mood-gallery figure:nth-child(2){padding-top:20px}.aos-film{grid-template-columns:1fr;padding:24px;gap:20px}.aos-film h3{font-size:26px}.aos-film video{max-width:310px;margin:auto}.aos-pairings>div{grid-template-columns:1fr;gap:0}}
.aos-detail{margin-top:40px;padding-top:26px;border-top:1px solid #e8e8e8}
.aos-detail video{display:block;width:100%;height:auto;border-radius:100px 100px 12px 12px;background:#111111}
/* Fixed-size sprays and scent duo use their own accessible action label. */
html .product-thumb.arabiva-choose-format-card .cart-group .btn-cart.btn.arabiva-choose-format.arabiva-aos-action::after { content: attr(aria-label); }
/* Diffuser fragrance oils: scoped editorial content, native product controls. */
.dfo-collection,.dfo-story{color:#111111;line-height:1.8;max-width:1200px;margin-inline:auto}
.dfo-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#ffffff;min-height:360px}
.dfo-hero>img{width:100%;height:450px;object-fit:cover;display:block}
.dfo-hero>div{position:absolute;inset-block:0;left:4%;width:42%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:start}
.dfo-hero h2{font-size:clamp(30px,4vw,52px);line-height:1.25;margin:12px 0;color:#111111}
.dfo-eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:#8c5a28}
.dfo-hero a,.dfo-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;background:#111111;color:#ffffff;border-radius:8px;text-decoration:none;font-weight:700}
.dfo-hero a:hover,.dfo-link:hover{background:#8c5a28;color:#ffffff}
.dfo-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:30px 0;margin-bottom:20px;border-bottom:1px solid #e8e8e8;text-align:center}
.dfo-overview strong,.dfo-overview span{display:block}.dfo-overview strong{font-size:24px;color:#8c5a28}
.dfo-intro{max-width:800px;text-align:center;margin:32px auto}.dfo-intro h2{font-size:clamp(26px,3vw,40px);line-height:1.35}
.dfo-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0}.dfo-tags span{border:1px solid #e8e8e8;padding:6px 14px;border-radius:30px;font-size:13px}
.dfo-editorial{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:40px 0}.dfo-editorial>img{width:100%;height:auto;display:block;border-radius:160px 160px 16px 16px}.dfo-editorial h3{font-size:28px;line-height:1.3;overflow-wrap:anywhere}
.dfo-prices{width:100%;border-collapse:collapse;margin-top:22px}.dfo-prices caption{text-align:start;font-size:14px;font-weight:700;margin-bottom:8px}.dfo-prices th,.dfo-prices td{padding:12px 10px;border-bottom:1px solid #e8e8e8;text-align:start}.dfo-prices thead{background:#111111;color:#ffffff}.dfo-prices tbody td{color:#8c5a28;font-weight:700}
.dfo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:40px 0}.dfo-steps article{padding:24px;border:1px solid #e8e8e8;border-radius:14px}.dfo-steps b{font-size:32px;color:#b87333}.dfo-steps h3{font-size:19px}
.dfo-faq{margin:36px 0}.dfo-faq details{border-bottom:1px solid #e8e8e8;padding:16px 0}.dfo-faq summary{cursor:pointer;font-weight:700;min-height:30px}.dfo-note{font-size:12px;color:#555555}.dfo-link{margin:20px 0}
@media(max-width:767px){.dfo-hero>img{height:280px}.dfo-hero>div{position:relative;left:auto;width:auto;inset:auto;padding:24px;align-items:stretch;background:#ffffff}.dfo-hero{border:1px solid #e8e8e8}.dfo-hero h2{font-size:30px}.dfo-overview{gap:10px;padding:22px 0}.dfo-overview strong{font-size:18px}.dfo-overview span{font-size:11px}.dfo-editorial{grid-template-columns:1fr;gap:22px}.dfo-steps{grid-template-columns:1fr;gap:12px}.dfo-steps article{padding:18px}.dfo-story{padding:0 4px}}
/* Chic grey hospitality art and equal-price diffuser oil types. */
.dfo-formats{margin:42px 0;padding:28px;background:#f3f3f3;border-radius:18px;color:#111111}.dfo-formats>h3{font-size:clamp(23px,3vw,34px);line-height:1.35;margin:10px 0 24px}.dfo-format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.dfo-format-grid article{background:#ffffff;border-radius:14px;overflow:hidden}.dfo-format-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}.dfo-format-grid article>div{padding:22px}.dfo-format-grid span{color:#8c5a28;font-size:12px;letter-spacing:.12em}.dfo-format-grid h4{font-size:21px;margin:8px 0}.dfo-format-note{font-size:14px;margin:24px 0 0}.dfo-formats .dfo-eyebrow{margin:0}.dfo-hero{background:#eeeeee}
@media(max-width:767px){.dfo-formats{padding:18px;margin:28px 0}.dfo-format-grid{grid-template-columns:1fr;gap:18px}.dfo-format-grid article>div{padding:18px}}
@media(min-width:768px){.dfo-hotel>div,.dfo-hotel h2,.dfo-hotel .dfo-eyebrow{color:#ffffff}.dfo-hotel a{background:#ffffff;color:#111111}.dfo-hotel a:hover{background:#d9985f;color:#111111}}
/* AOS uses the native slider height, with artwork filling the entire slide. */
.module-slider.module-slider-947 .module-item.aos-slide .slide-content{display:block;background:#111111}
.module-slider-947 .aos-slide .slide-content>img{position:absolute;inset:0 0 0 auto;width:56%;height:100%;object-fit:cover;object-position:center}
.module-slider.module-slider-947 .aos-slide .slide-cols{position:absolute;inset:0;width:100%;height:100%;padding:24px 7%;max-width:none;justify-content:flex-end}
.module-slider.module-slider-947 .module-item.aos-slide .slide-col{flex:0 0 42%;width:42%;max-width:42%;padding:0}
.module-slider-947 .aos-slide .slide-layers{width:100%;max-width:100%;text-align:start}
.module-slider-947 .aos-slide .slide-text{max-width:100%}
.module-slider-947 .aos-slide .slide-text-item{white-space:normal}
.module-slider-947 .aos-slide .module-subitem-2 .slide-text-item{font-size:clamp(28px,2.7vw,52px);line-height:1.35}
.module-slider-947 .aos-slide .module-subitem-3 .slide-text-item{font-size:clamp(13px,1.05vw,18px);line-height:1.8}
.module-slider-947 .aos-slide .slide-button-group{flex-wrap:wrap;gap:10px}
@media(max-width:767px){
.module-slider-947 .aos-slide .slide-content>img{width:100%;height:35%;object-fit:cover;object-position:center}
.module-slider.module-slider-947 .aos-slide .slide-cols{inset:35% 0 0;height:65%;padding:8px 20px 22px}
.module-slider.module-slider-947 .module-item.aos-slide .slide-col{flex-basis:100%;width:100%;max-width:100%}
.module-slider-947 .aos-slide .slide-layers{align-items:center;text-align:center;gap:8px}
.module-slider-947 .aos-slide .module-subitem-1 .slide-text-item{font-size:13px}
.module-slider-947 .aos-slide .module-subitem-2 .slide-text-item{font-size:25px}
.module-slider-947 .aos-slide .module-subitem-3 .slide-text-item{font-size:12px}
.module-slider-947 .aos-slide .slide-button-group{justify-content:center}
}
@media(max-width:767px){.module-slider.module-slider-947 .module-item.aos-slide .module-subitem{margin:0}.module-slider.module-slider-947 .module-item.aos-slide .module-subitem-2 .slide-text-item{font-size:23px;line-height:1.3}.module-slider.module-slider-947 .module-item.aos-slide .slide-layers{gap:6px}}
.module-slider.module-slider-947 .module-item.aos-slide .slide-text-item>span{font-size:inherit;line-height:inherit}
.module-slider.module-slider-947 .module-item.aos-slide .slide-col{position:absolute;left:7%;top:24px;bottom:24px;width:36%;max-width:36%;min-width:0}
@media(max-width:767px){.module-slider.module-slider-947 .module-item.aos-slide .slide-col{left:20px;right:20px;top:8px;bottom:22px;width:auto;max-width:none}}
/* Arabiva copper option photos: graduated visual size; preserve bottle aspect ratios. */
html[data-fsp-variant="atelier"] body .fs.fs .fs-size .fs-bottle img[src*="/copper-unified/"],
html[data-fsp-variant="atelier"] body .fs.fs .fs-size .fs-bottle img[src*="/Bottles/fs-studio-tola"] {
width:100% !important;
height:100% !important;
transform:scale(var(--fsa-vol, 1)) !important;
padding:0 !important;
object-fit:contain !important;
filter:none !important;
mix-blend-mode:multiply;
}
.av-made-to-order {margin-block:24px;padding:20px;border:1px solid #b87333;border-radius:16px;background:#ffffff;color:#111111}
.av-made-to-order h3 {margin-top:0}
/* Arabiva Discover: native language, four explicit perfume collections. */
.av-discover { color:#111111; padding-block:24px 64px; }
.av-discover #content { width:100%; float:none; }
.av-discover h1,.av-discover h2,.av-discover h3,.av-discover input,.av-discover select,.av-discover button { font-family:inherit; letter-spacing:normal; }
.av-discover-intro { max-width:880px; margin:32px auto; text-align:center; }
.av-discover-kicker { color:#8c5a28; font-weight:600; }
.av-discover h1 { font-size:clamp(28px,4vw,42px); line-height:1.45; margin:12px 0; }
.av-discover p { line-height:1.9; }
.av-discover-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-block:24px; }
.av-discover-nav a { border:1px solid #b87333; border-radius:24px; padding:10px 18px; color:#111111; }
.av-discover-nav a:hover,.av-discover-all:hover { color:#8c5a28; background:#ffffff; }
.av-discover-search { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto; gap:16px; align-items:end; padding:24px; border:1px solid #e8e8e8; border-radius:12px; }
.av-discover-search label { display:block; margin-bottom:8px; }
.av-discover-search .form-control { width:100%; height:48px; border:1px solid #e8e8e8; border-radius:6px; padding:10px; min-width:0; }
.av-discover-search .btn { min-height:48px; padding:10px 28px; background:#b87333; color:#ffffff; border:0; }
.av-discover-search .btn:hover { background:#8c5a28; }
.av-discover-collection { margin-top:48px; scroll-margin-top:140px; }
.av-discover-section-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:20px; }
.av-discover h2 { font-size:26px; line-height:1.5; margin:0 0 8px; }
.av-discover-all { color:#8c5a28; white-space:nowrap; text-decoration:underline; text-underline-offset:5px; }
.av-discover-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.av-discover-card { border:1px solid #e8e8e8; border-radius:10px; overflow:hidden; min-width:0; background:#ffffff; }
.av-discover-card a { display:block; height:100%; color:#111111; padding-bottom:18px; }
.av-discover-card img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.av-discover-card h3 { font-size:17px; line-height:1.65; margin:16px 16px 8px; overflow-wrap:anywhere; }
.av-discover-card span { display:block; margin-inline:16px; font-size:14px; color:#8c5a28; }
.av-discover a:focus-visible,.av-discover input:focus-visible,.av-discover select:focus-visible,.av-discover button:focus-visible { outline:2px solid #b87333; outline-offset:4px; }
@media(max-width:767px) {
.av-discover-search { grid-template-columns:minmax(0,1fr); padding:18px; }
.av-discover-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.av-discover-section-heading { display:block; }
.av-discover-all { display:inline-block; margin-top:8px; }
.av-discover h2 { font-size:23px; }
.av-discover-card h3 { font-size:15px; margin:12px; }
.av-discover-card span { margin-inline:12px; }
}
/* Site UX 2026-10-03: real Journal header and product template; no shell replacement. */
html.desktop-header-active .av-site-header .top-bar {
display:flex; justify-content:space-between; gap:24px; height:auto; min-height:38px;
padding:4px 28px; background:#111111; color:#ffffff;
}
.av-utility-links { position:relative; z-index:1; display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:12px; }
.av-utility-links a { color:#ffffff; }
html.desktop-header-active .av-site-header .top-bar > .language-currency {
position:static; transform:none; margin-inline-start:auto; margin-inline-end:0; width:auto;
}
html.desktop-header-active .av-site-header .top-bar > .third-menu {
position:static; transform:none; width:auto; margin:0;
}
html.desktop-header-active .av-site-header .mid-bar { justify-content:space-between; height:78px; padding-inline:28px; }
html.desktop-header-active .av-site-header .header-cart-group { margin-inline-start:auto; }
.av-site-header .av-header-account { color:#111111; white-space:nowrap; font-size:12px; padding-inline:18px; }
html.desktop-header-active .av-site-header > .av-primary-nav {
position:relative; width:100%; max-width:none; height:auto; min-height:48px; margin:0;
border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; background:#ffffff;
display:flex; justify-content:center; padding-inline:20px;
}
html.desktop-header-active .av-site-header .av-primary-nav .main-menu { width:auto; max-width:100%; }
html.desktop-header-active .av-site-header .av-primary-nav .main-menu > .j-menu { flex-wrap:nowrap; justify-content:center; }
html.desktop-header-active .av-site-header .av-primary-nav .main-menu > .j-menu > .menu-item > a {
height:48px; min-height:48px; padding-inline:clamp(10px,1.3vw,24px); white-space:nowrap; font-size:12px;
}
html.route-product-product .product-details > h1.av-product-title {
display:block; position:static; margin:0 0 18px; padding:0; font-size:clamp(26px,2.5vw,36px);
line-height:1.45; color:#111111; text-align:start; order:-110; max-width:100%; overflow-wrap:anywhere;
}
html.desktop-header-active.route-product-product .av-mobile-product-title { display:none; }
html.mobile-header-active.route-product-product .product-details > h1.av-product-title {
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
html.mobile-header-active.route-product-product .av-mobile-product-title {
display:block; font-size:26px; line-height:1.45; padding:16px 20px; text-align:center; color:#111111;
}
html.route-product-product .fs .fs-title h2 { line-height:1.5; }
html.route-product-product .product-info .product-right { min-width:0; }
html.route-product-product .product-info .product-left { min-width:0; }
html.route-product-product .product-price-group, .fs-money, .fs-price, .price-normal, .price-new, .price-old {
unicode-bidi:isolate; direction:ltr;
}
@media(min-width:1025px) {
html.route-product-product .product-info { column-gap:38px; }
html.route-product-product .product-info .product-left { width:46%; }
html.route-product-product .product-info .product-right { width:calc(54% - 38px); }
}
@media(max-width:1024px) {
html.route-product-product .product-info .product-left .main-image img { max-height:430px; object-fit:contain; }
html.route-product-product .product-details .wishlist-compare { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
.product-info *, .av-site-header * { scroll-behavior:auto; transition-duration:0.01ms; }
}
/* Keep the semantic template title despite Identity's legacy !important hiding rule. */
html.route-product-product .product-details > h1.av-product-title { display:block !important; visibility:visible; }
html.desktop-header-active .av-site-header .top-bar { position:relative; width:100%; }
html.desktop-header-active .av-site-header .top-bar::before { height:100%; background:#111111; }
body .product-details > h1.av-product-title { text-align:start; padding-inline:0; }
.product-details > #hh-identity-hero { order:-105; padding-inline:0; text-align:start; }
.product-details > #hh-identity-hero .hh-id-h1 { display:none; }
/* Stack the product columns throughout phone widths, including World storefront. */
@media(max-width:767px) {
html.mobile-header-active.route-product-product .product-info { flex-direction:column; row-gap:24px; }
html.mobile-header-active.route-product-product .product-info > .product-left,
html.mobile-header-active.route-product-product .product-info > .product-right { width:100%; max-width:100%; flex-basis:auto; }
}
/* Google testimonials — codex-google-reviews; scoped, no added fonts. */
.av-google-reviews{max-width:1280px;margin:64px auto;padding:40px 28px;border:1px solid #e8e8e8;border-radius:24px;background:#ffffff;color:#111111;text-align:start}
.av-gr-heading{display:flex;align-items:center;justify-content:space-between;gap:36px;margin-bottom:30px}
.av-gr-eyebrow{color:#8c5a28;font-size:12px;font-weight:600;letter-spacing:.08em;margin:0 0 12px}
.av-gr-heading h2{font-size:clamp(26px,3vw,38px);line-height:1.35;margin:0 0 12px;color:#111111}
.av-gr-heading p{margin:0;line-height:1.8}
.av-gr-summary{flex:0 0 270px;padding-inline-start:28px;border-inline-start:1px solid #e8e8e8}
.av-gr-source{font-size:13px;font-weight:600;color:#111111}
.av-gr-score{display:flex;align-items:baseline;gap:8px;margin:4px 0}
.av-gr-score strong{font-size:42px;line-height:1.2;color:#111111}
.av-gr-score span,.av-gr-summary small,.av-gr-card time{font-size:12px;color:#111111}
.av-gr-summary p{font-size:12px}.av-gr-summary small{display:block;margin-top:6px}
.av-gr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.av-gr-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid #e8e8e8;border-radius:16px;background:#ffffff;overflow-wrap:anywhere}
.av-gr-card>header{display:flex;align-items:center;gap:10px}.av-gr-card>header>.av-gr-source{margin-inline-start:auto;font-size:11px}
.av-gr-avatar{display:grid;place-items:center;flex:0 0 40px;height:40px;border:1px solid #b87333;border-radius:50%;font-size:18px;color:#8c5a28}
.av-gr-card h3{font-size:14px;margin:0 0 4px;line-height:1.5;font-weight:600;color:#111111}
.av-gr-stars{display:flex;gap:3px;margin:18px 0 12px;font-size:18px;color:#e8e8e8}.av-gr-stars .is-filled{color:#b87333}
.av-gr-card blockquote,.av-gr-excerpt{font-size:14px;line-height:1.95;margin:0;padding:0;border:0;color:#111111;white-space:pre-line}
.av-gr-card blockquote bdi{unicode-bidi:plaintext}
.av-gr-reading summary{list-style:none;cursor:pointer}.av-gr-reading summary::-webkit-details-marker{display:none}
.av-gr-expand,.av-gr-collapse{font-size:12px;font-weight:600;color:#8c5a28;margin-top:10px;align-items:center;gap:8px}
.av-gr-expand{display:flex}.av-gr-collapse{display:none}.av-gr-reading[open] .av-gr-excerpt,.av-gr-reading[open] .av-gr-expand{display:none}.av-gr-reading[open] .av-gr-collapse{display:flex;margin:0 0 10px}
.av-gr-original{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid #e8e8e8;color:#8c5a28;font-size:12px;min-height:44px;text-decoration:none}
.av-gr-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid #e8e8e8}
.av-gr-footer p{font-size:12px;line-height:1.8;margin:0;max-width:560px}
.av-gr-all{display:inline-flex;align-items:center;justify-content:center;gap:16px;flex-shrink:0;background:#111111;color:#ffffff;border:1px solid #111111;border-radius:10px;padding:13px 20px;font-size:13px;min-height:48px;text-decoration:none}
.av-gr-all:hover{background:#8c5a28;border-color:#8c5a28;color:#ffffff}.av-gr-original:hover{color:#8c5a28;text-decoration:underline}
.av-google-reviews a:focus-visible,.av-gr-reading summary:focus-visible{outline:3px solid #b87333;outline-offset:4px;border-radius:4px}
@media(max-width:1000px){.av-gr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.av-gr-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.av-google-reviews{margin:32px 12px;padding:26px 18px;border-radius:18px}.av-gr-heading{flex-direction:column;align-items:stretch;gap:20px;margin-bottom:22px}.av-gr-summary{flex:auto;padding-inline-start:0;padding-top:18px;border-inline-start:0;border-top:1px solid #e8e8e8}.av-gr-grid{grid-template-columns:minmax(0,1fr);gap:14px}.av-gr-card{padding:20px}.av-gr-all{width:100%;box-sizing:border-box}.av-gr-footer{gap:16px}.av-gr-score strong{font-size:36px}}
/* Google review gallery refinement — codex-google-reviews-photos. */
.av-google-reviews{padding:48px 36px;border-radius:28px;border-top:3px solid #b87333;box-shadow:0 16px 48px #11111108}
.av-gr-heading{gap:48px;margin-bottom:36px}.av-gr-heading h2{letter-spacing:-.025em}.av-gr-heading>div:first-child{max-width:640px}
.av-gr-summary{flex-basis:250px;background:#111111;border:0;padding:22px 26px;border-radius:18px;color:#ffffff}
.av-gr-summary .av-gr-source,.av-gr-summary .av-gr-score strong,.av-gr-summary .av-gr-score span,.av-gr-summary small{color:#ffffff}.av-gr-summary .av-gr-source{letter-spacing:.02em}.av-gr-summary .av-gr-score strong{font-size:48px}.av-gr-summary p{color:#ffffff}
.av-gr-grid{align-items:stretch;gap:22px}.av-gr-card{border-radius:20px;padding:26px;transition:border-color .2s ease,box-shadow .2s ease}.av-gr-card:hover{border-color:#b87333;box-shadow:0 8px 28px #11111108}
.av-gr-avatar{overflow:hidden}.av-gr-avatar img{width:100%;height:100%;object-fit:cover}.av-gr-card blockquote,.av-gr-excerpt{font-size:15px;line-height:1.9}.av-gr-original{margin-top:auto;padding-top:18px}.av-gr-card>blockquote,.av-gr-reading{margin-bottom:22px}
.av-gr-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px}.av-gr-photos:has(>.av-gr-photo:only-child){grid-template-columns:1fr}
.av-gr-photo{position:relative;display:block;border-radius:12px;overflow:hidden;background:#111111;aspect-ratio:4/3;min-width:0}.av-gr-photo[hidden]{display:none}.av-gr-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.av-gr-photo:hover img{transform:scale(1.04)}.av-gr-photo span{position:absolute;inset-inline:0;bottom:0;padding:8px 10px;background:#111111cc;color:#ffffff;font-size:11px;text-align:center}
.av-gr-dialog{box-sizing:border-box;max-width:min(92vw,960px);max-height:90vh;border:1px solid #e8e8e8;border-radius:18px;padding:52px 16px 16px;background:#ffffff;color:#111111}.av-gr-dialog::backdrop{background:#111111d9}.av-gr-dialog>img{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto;border-radius:8px}.av-gr-close{position:absolute;inset-inline-end:10px;top:8px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e8e8e8;border-radius:50%;background:#ffffff;color:#111111;font-size:26px;cursor:pointer}.av-gr-close:focus-visible{outline:3px solid #b87333;outline-offset:2px}.av-gr-caption{font-size:13px;text-align:center;margin:12px 0 0;overflow-wrap:anywhere}
@media(max-width:600px){.av-google-reviews{padding:28px 18px;border-radius:22px}.av-gr-heading{gap:22px;margin-bottom:24px}.av-gr-summary{flex:auto;padding:18px 22px;border:0}.av-gr-summary .av-gr-score strong{font-size:40px}.av-gr-card{padding:22px}.av-gr-grid{gap:16px}.av-gr-dialog{padding-inline:10px}.av-gr-photo span{font-size:10px;padding:6px}}
@media(prefers-reduced-motion:reduce){.av-gr-card,.av-gr-photo img{transition:none}.av-gr-photo:hover img{transform:none}}
/* Compact Google review thumbnails. */
.av-gr-photos,.av-gr-photos:has(>.av-gr-photo:only-child){display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.av-gr-photo{flex:0 0 72px;width:72px;height:72px;aspect-ratio:1;border-radius:10px}
.av-gr-photo span{font-size:0;padding:4px;line-height:1}
.av-gr-photo span::after{content:"+";font-size:14px}
/* Subtle testimonial typography polish; inherit Journal font. */
.av-google-reviews{font-family:inherit;border-top-width:2px;box-shadow:0 10px 32px #11111105}
.av-gr-heading h2{font-size:clamp(26px,2.7vw,34px);font-weight:600;line-height:1.5;letter-spacing:0}
.av-gr-eyebrow{font-size:12px;letter-spacing:0;font-weight:500;margin-bottom:8px}
.av-gr-heading>div:first-child>p:last-child{font-size:14px;line-height:1.9}
.av-gr-card{padding:24px;border-radius:16px}.av-gr-card h3{font-size:14px;font-weight:600;line-height:1.7}
.av-gr-card blockquote,.av-gr-excerpt{font-size:14px;line-height:2;font-weight:400}
.av-gr-card time{font-size:11px}.av-gr-stars{font-size:16px;gap:4px;margin:16px 0 14px}
.av-gr-expand,.av-gr-collapse{font-size:12px;font-weight:500}.av-gr-original{font-size:12px}
.av-gr-summary{border-radius:14px}.av-gr-summary .av-gr-score strong{font-size:42px;font-weight:600}
.av-gr-all{font-weight:500;border-radius:8px}.av-gr-footer p{line-height:1.9}
@media(max-width:600px){.av-gr-heading h2{font-size:26px}.av-gr-card{padding:20px}.av-gr-summary .av-gr-score strong{font-size:36px}}
/* Mobile purchase bar owns the bottom controls. One override is required because Julia sets bottom inline. */
@media (max-width:767px) {
.route-product-product #hh-chat-bubble {
bottom:var(--av-purchase-clearance, 22px) !important;
}
}
/* Julia launcher: compact, quiet, and consistent across configured chat themes.
Scoped priority overrides are needed for the widget's inline sizing and injected theme rules. */
html body #hh-chat-bubble,
html body[data-hh-chat-theme] #hh-chat-bubble {
width:52px !important;
height:52px !important;
background:#111111 !important;
border:1px solid #b87333 !important;
box-shadow:0 3px 10px rgba(17,17,17,.16) !important;
transform:none !important;
animation:none !important;
}
html body #hh-chat-bubble svg { width:24px; height:24px; }
html body #hh-chat-bubble:focus-visible { outline:2px solid #b87333; outline-offset:4px; }
@media (hover:hover) {
html body[data-hh-chat-theme] #hh-chat-bubble:hover,
html body #hh-chat-bubble:hover { background:#8c5a28 !important; }
}
/* Pink October 2026: campaign only, existing theme controls preserved. */
.av-pink-campaign{max-width:1600px;margin:16px auto 28px;border:1px solid #e8e8e8;background:#fff;color:#111;overflow:hidden;border-radius:12px}
.av-pink-art,.av-pink-art picture{display:block}.av-pink-art img{display:block;width:100%;height:auto}
.av-pink-caption{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.av-pink-caption strong,.av-pink-gift strong{font-size:18px;color:#8c5a28}.av-pink-caption p,.av-pink-gift p{margin:5px 0;font-size:14px}
.av-pink-gift{display:flex;align-items:center;gap:16px;padding:16px;margin:16px 0;border:1px solid #b87333;border-radius:10px;background:#fff;color:#111}
.av-pink-gift img{width:96px;height:96px;object-fit:contain;border-radius:6px;flex-shrink:0}.av-pink-gift>div{flex:1;min-width:0}.av-pink-gift b{font-size:14px;color:#8c5a28}.av-pink-gift small{display:block;font-size:12px;line-height:1.8}
@media(max-width:640px){.av-pink-campaign{margin:12px 10px 20px}.av-pink-caption{padding:14px;align-items:flex-start;flex-direction:column}.av-pink-caption .btn{width:100%}.av-pink-gift{gap:10px;padding:12px;flex-wrap:wrap}.av-pink-gift img{width:76px;height:76px}.av-pink-gift strong{font-size:15px}.av-pink-gift b{width:100%;text-align:center}.av-pink-gift p{font-size:13px}}
.av-pink-gift-photo{display:block;width:96px;height:96px;overflow:hidden;border-radius:6px;flex-shrink:0;position:relative}.av-pink-gift .av-pink-gift-photo img{position:absolute;width:192px;height:192px;max-width:none;left:-48px;top:-48px}
@media(max-width:640px){.av-pink-gift-photo{width:76px;height:76px}.av-pink-gift .av-pink-gift-photo img{width:152px;height:152px;left:-38px;top:-38px}}
/* ARABIVA-MOMENTS:START */
.av-moments{--ink:#111111;--paper:#ffffff;--copper:#b87333;--hover:#d9985f;--dark:#8c5a28;--line:#e8e8e8}
.av-moments *{box-sizing:border-box}
.av-moments{scroll-behavior:smooth}
.av-moments{margin:0;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7}
.av-moments button,.av-moments a,.av-moments input{font:inherit}
.av-moments button{cursor:pointer}
.av-moments a{color:inherit}
.av-moments button:focus-visible,.av-moments a:focus-visible,.av-moments input:focus-visible{outline:3px solid var(--copper);outline-offset:4px}
.av-moments .review{background:var(--ink);color:white;padding:7px 20px;text-align:center;font-size:12px}
.av-moments .nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:22px 28px}
.av-moments .nav img{height:46px;width:145px;object-fit:contain}
.av-moments .nav-links{display:flex;gap:25px;align-items:center}
.av-moments .nav-links a{text-decoration:none;font-size:14px}
.av-moments .nav button{border:1px solid var(--line);background:white;padding:5px 14px;border-radius:30px}
.av-moments .wrap{max-width:1200px;margin:auto;padding:0 28px}
.av-moments .hero{position:relative;min-height:520px;border-radius:4px;overflow:hidden;background:#fff}
.av-moments .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.av-moments .hero-copy{position:relative;width:52%;padding:80px 48px 65px;margin-inline-end:auto}
.av-moments .eyebrow{color:var(--dark);font-size:12px;letter-spacing:1px;margin:0 0 12px}
.av-moments .hero h1{font-size:clamp(40px,4.7vw,66px);line-height:1.15;margin:0 0 25px;font-weight:700}
.av-moments .hero p:not(.eyebrow){max-width:400px;color:#444;font-size:17px;line-height:1.9}
.av-moments .cta{display:inline-block;background:var(--ink);color:white;border:0;text-decoration:none;padding:13px 27px;border-radius:40px;margin-top:10px;font-size:14px}
.av-moments .cta:hover{background:var(--dark);color:white}
.av-moments .intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:65px 0 30px}
.av-moments .intro h2{font-size:32px;line-height:1.4;margin:0}
.av-moments .intro p{margin:0;color:#666;font-size:15px}
.av-moments .step{padding:25px 0 20px;border-bottom:1px solid var(--line)}
.av-moments .step-title{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-size:21px}
.av-moments .num{font-size:13px;color:var(--dark);border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:inline-grid;place-items:center}
.av-moments .moods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.av-moments .mood{position:relative;min-height:145px;border:1px solid var(--line);background:white;text-align:start;padding:22px 18px;border-radius:6px;transition:transform .18s,border-color .18s}
.av-moments .mood:hover{transform:translateY(-3px);border-color:var(--copper)}
.av-moments .mood[aria-pressed=true]{border:2px solid var(--copper);padding:21px 17px;background:#fafafa}
.av-moments .mood strong{display:block;font-size:17px;margin:13px 0 5px}
.av-moments .mood small{display:block;color:#666;font-size:12px;line-height:1.5}
.av-moments .symbol{font-size:21px;color:var(--dark)}
.av-moments .chips{display:flex;gap:9px;flex-wrap:wrap}
.av-moments .chip{border:1px solid var(--line);border-radius:30px;padding:9px 19px;background:white;font-size:14px}
.av-moments .chip[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.av-moments .filters{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:25px 0}
.av-moments .filters label{display:flex;gap:10px;align-items:center;font-size:14px}
.av-moments .reset{border:0;border-bottom:1px solid var(--ink);padding:3px 0;background:white;font-size:13px}
.av-moments .match-summary{background:#fafafa;border-inline-start:3px solid var(--copper);padding:17px 22px;margin:24px 0;font-size:14px}
.av-moments .results-head{display:flex;justify-content:space-between;align-items:end;margin:38px 0 20px}
.av-moments .results-head h2{margin:0;font-size:27px}
.av-moments .results-head span{font-size:13px;color:#666}
.av-moments .results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px}
.av-moments .card{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:white}
.av-moments .card-image{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fafafa}
.av-moments .card-copy{padding:18px}
.av-moments .card h3{margin:0 0 7px;font-size:18px;line-height:1.5}
.av-moments .card-notes{font-size:12px;color:#666;margin:0 0 13px;min-height:40px}
.av-moments .reason{border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:#555;margin:0 0 15px}
.av-moments .card a{font-size:13px;text-decoration:none;border-bottom:1px solid var(--copper);padding-bottom:4px}
.av-moments .empty{grid-column:1/-1;border:1px solid var(--line);padding:35px;text-align:center;background:#fafafa}
.av-moments .empty h3{font-size:22px;margin:0 0 10px}
.av-moments .empty p{color:#666;margin:0}
.av-moments .scene{margin:65px 0 0;display:grid;grid-template-columns:1.15fr 1fr;background:#fafafa;align-items:center}
.av-moments .scene img{width:100%;height:360px;object-fit:cover}
.av-moments .scene-copy{padding:35px}
.av-moments .scene h2{font-size:32px;line-height:1.4;margin:0 0 18px}
.av-moments .scene p{color:#555;font-size:14px}
.av-moments .facts{padding:42px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.av-moments .facts h3{font-size:17px;margin:0 0 8px}
.av-moments .facts p{font-size:13px;color:#666;margin:0}
.av-moments .footer{border-top:1px solid var(--line);padding:25px;text-align:center;color:#666;font-size:12px}
.av-moments #method{margin-top:22px;font-size:13px;color:#666}
.av-moments details{padding:20px 0}
.av-moments summary{cursor:pointer;color:var(--ink)}
.av-moments .prototype-note{font-size:12px;margin:25px 0;color:#777}
.av-moments[dir=ltr] .hero-copy{margin-inline-start:auto;margin-inline-end:0}
@media (max-width:900px){.av-moments .moods{grid-template-columns:repeat(3,minmax(0,1fr))}
.av-moments .results{grid-template-columns:repeat(3,minmax(0,1fr))}
.av-moments .hero-copy{padding:55px 30px}
.av-moments .hero{min-height:460px}
.av-moments .intro{gap:25px}
.av-moments .hero-copy p:not(.eyebrow){font-size:15px}}
@media (max-width:600px){.av-moments .nav{padding:16px 18px}
.av-moments .nav img{height:35px;width:110px}
.av-moments .nav-links{gap:14px}
.av-moments .wrap{padding:0 18px}
.av-moments .hero{min-height:0;display:flex;flex-direction:column}
.av-moments .hero img{position:static;height:265px;object-position:25% 65%;order:2}
.av-moments .hero-copy{width:100%;padding:28px 22px;order:1;background:#fafafa}
.av-moments .hero h1{font-size:40px}
.av-moments .hero-copy p:not(.eyebrow){font-size:14px}
.av-moments .intro{grid-template-columns:1fr;gap:16px;padding:38px 0 15px}
.av-moments .intro h2{font-size:27px}
.av-moments .moods{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.av-moments .mood{min-height:125px;padding:17px 15px}
.av-moments .mood[aria-pressed=true]{padding:16px 14px}
.av-moments .mood strong{font-size:16px;margin:10px 0 5px}
.av-moments .step-title{font-size:19px}
.av-moments .chip{font-size:13px;padding:8px 14px}
.av-moments .filters{gap:12px}
.av-moments .results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.av-moments .results-head{align-items:start;gap:14px}
.av-moments .results-head h2{font-size:24px}
.av-moments .card-copy{padding:12px}
.av-moments .card h3{font-size:16px}
.av-moments .scene{grid-template-columns:1fr;margin-top:40px}
.av-moments .scene img{height:260px}
.av-moments .scene-copy{padding:25px}
.av-moments .scene h2{font-size:27px}
.av-moments .facts{grid-template-columns:1fr;gap:25px;padding:30px 0}
.av-moments .review{font-size:11px}
.av-moments .match-summary{padding:13px 16px}
.av-moments .nav-links{gap:10px}
.av-moments .nav-links a{font-size:12px}}
@media (prefers-reduced-motion:reduce){.av-moments{scroll-behavior:auto}
.av-moments .mood{transition:none}}
.av-moments .hero{min-height:380px}
.av-moments .hero-copy{padding:48px 42px}
.av-moments .hero h1{font-size:clamp(38px,4.3vw,58px)}
.av-moments .intro{padding-top:45px;gap:35px}
.av-moments .moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;margin:15px 0 26px}
.av-moments .moment{display:block;width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;background:white;text-align:start;transition:transform .18s,border-color .18s;position:relative}
.av-moments .moment:hover{transform:translateY(-3px);border-color:var(--copper)}
.av-moments .moment[aria-pressed=true]{border-color:var(--copper);box-shadow:0 0 0 2px var(--copper)}
.av-moments .moment img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.av-moments .moment-copy{display:block;padding:17px 20px 20px}
.av-moments .moment-kicker{display:block;font-size:11px;color:var(--dark);letter-spacing:.5px}
.av-moments .moment strong{display:block;font-size:24px;line-height:1.4;margin:4px 0 6px}
.av-moments .moment small{display:block;font-size:13px;color:#666;line-height:1.7}
.av-moments .moment-arrow{position:absolute;inset-inline-end:18px;bottom:20px;color:var(--dark);font-size:20px}
.av-moments .moment-copy{padding-inline-end:40px}
.av-moments .moment[aria-pressed=true] .moment-arrow{font-weight:bold}
.av-moments .selection{display:flex;align-items:center;justify-content:space-between;gap:20px;border-inline-start:3px solid var(--copper);background:#fafafa;padding:18px 22px;margin:24px 0}
.av-moments .selection p{margin:0;font-size:14px}
.av-moments .selection a{flex-shrink:0;font-size:13px;text-underline-offset:5px}
.av-moments .refine{border-block:1px solid var(--line);padding:18px 0}
.av-moments .refine>summary{font-size:14px}
.av-moments .refine .step:last-of-type{border-bottom:0}
.av-moments .selection .cta{margin:0;padding:10px 18px;text-decoration:none}
.av-moments .match-summary{margin:18px 0}
.av-moments .results-head{scroll-margin-top:30px}
.av-moments .back-choices{font-size:13px;color:var(--dark)}
@media (max-width:900px){.av-moments .moments{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-moments .hero{min-height:350px}
.av-moments .hero-copy{padding:38px 28px}}
@media (max-width:600px){.av-moments .hero{min-height:0}
.av-moments .hero-copy{padding:26px 22px}
.av-moments .hero img{height:190px}
.av-moments .hero h1{font-size:36px;margin-bottom:14px}
.av-moments .moments{gap:16px 12px}
.av-moments .moment-copy{padding:12px 14px 16px}
.av-moments .moment strong{font-size:19px}
.av-moments .moment small{font-size:12px}
.av-moments .moment-arrow{display:none}
.av-moments .moment-kicker{font-size:10px}
.av-moments .selection{flex-direction:column;align-items:start;gap:12px;padding:16px}
.av-moments .intro{padding-top:32px}
.av-moments .intro h2{font-size:26px}}
@media (max-width:360px){.av-moments .moments{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.av-moments .moment{transition:none}}
.av-moments .moment-count{display:block;color:var(--dark);font-size:12px;margin-top:10px}
.av-moments .more-row{text-align:center;margin:28px 0}
.av-moments .more-row p{font-size:13px;color:#666}
.av-moments .more-row button{margin-top:0}
.av-moments .more-row button[hidden]{display:none}
.av-moments .moments-toolbar{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:0 0 20px;font-size:14px}.av-moments .moments-toolbar a{color:#111111;text-decoration:none}.av-moments .moments-toolbar a:hover{color:#8c5a28}.av-moments .moments-toolbar .moment-language{margin-inline-start:auto;border:1px solid #e8e8e8;padding:5px 14px;border-radius:30px}.av-moments form.moments{padding:0;border:0}.av-moments .scope-note{font-size:12px;color:#666;margin:10px 0}.av-moments .moment-unavailable{display:block;color:#666;font-size:12px;margin:0 0 10px}.av-moments .more-row a.cta{margin-top:0}.av-moments .cta:focus{color:#ffffff}.av-moments button{font-family:inherit}.av-moments .card h3{color:#111111}.av-moments [hidden]{display:none}.av-moments .hero img{margin:0}.av-moments .hero-copy h1{color:#111111}.av-moments .hero-copy .cta{color:#ffffff}.av-moments .moment strong{color:#111111}.av-moments .moment img{margin:0}.av-moments .hero h1{font-weight:700}.av-moments .hero-copy{min-width:0}.av-moments .step-title{line-height:1.4}.av-moments .facts h3{line-height:1.5}
.av-moments #av-mt-selector,.av-moments #av-mt-results-title{scroll-margin-top:170px}
@media(max-width:767px){.av-moments #av-mt-selector,.av-moments #av-mt-results-title{scroll-margin-top:80px}}
/* ARABIVA-MOMENTS:END */
/* World discovery links follow the Arabiva copper palette. */
.av-market-world .av-market-note a{color:#b87333;text-decoration:underline;text-underline-offset:2px}
.av-market-world .av-market-note a:hover,.av-market-world .av-market-note a:focus-visible{color:#d9985f}
/* 8ml twist-open travel photos show both closed and open states. */
.fs .fs-size:has(img[src*="/Bottles/arabiva-travel-8ml-"]),
.fs .fs-size:has(img[src*="/Bottles/arabiva-stone-spray-"]) {
--fsa-vol: 1 !important;
}
/* Arabiva travel discovery collections: theme header and cart stay native. */
.hh-travel-discovery{color:#111111;padding-top:32px;padding-bottom:48px}
.hh-travel-intro{max-width:900px;margin:0 auto 40px;text-align:center}
.hh-travel-eyebrow{color:#8c5a28;font-size:12px;letter-spacing:.08em;margin-bottom:10px}
.hh-travel-intro h1{font-size:clamp(30px,4vw,48px);line-height:1.2;margin:0 0 16px}
.hh-travel-intro>p{line-height:1.8}
.hh-travel-offer{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin:22px 0 8px}
.hh-travel-offer strong,.hh-travel-buy strong{font-size:30px;color:#111111}
.hh-travel-saving{color:#8c5a28}
.hh-travel-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.hh-travel-nav a{border:1px solid #e8e8e8;border-radius:24px;padding:10px 18px;color:#111111;background:#ffffff;text-decoration:none}
.hh-travel-nav a:hover{border-color:#b87333;color:#8c5a28}
.hh-travel-collection{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;border-top:1px solid #e8e8e8;padding:40px 0;scroll-margin-top:100px}
.hh-travel-collection figure{margin:0;min-width:0}
.hh-travel-collection img{display:block;width:100%;height:auto;border-radius:12px}
.hh-travel-collection figcaption{text-align:center;color:#666666;font-size:12px;padding:10px}
.hh-travel-details{min-width:0}
.hh-travel-details h2{font-size:clamp(24px,3vw,34px);line-height:1.35;margin:0 0 12px}
.hh-travel-details>p{line-height:1.8}
.hh-travel-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;padding:0;list-style-position:inside;margin:24px 0}
.hh-travel-members li{border-bottom:1px solid #e8e8e8;padding:8px 0;overflow-wrap:anywhere}
.hh-travel-members a{font-weight:600;color:#111111}
.hh-travel-members span,.hh-travel-members small{display:block;font-size:12px;color:#666666;line-height:1.8}
.hh-travel-buy{display:flex;align-items:center;gap:20px;margin:24px 0 14px}
.hh-travel-buy span{color:#8c5a28}
.hh-travel-form .btn{width:100%;min-height:48px;white-space:normal;background:#111111;color:#ffffff;border:1px solid #111111;border-radius:6px;font-size:16px}
.hh-travel-form .btn:hover{background:#b87333;border-color:#b87333}
.hh-travel-form .btn:disabled{opacity:.6;cursor:default}
.hh-travel-feedback{min-height:28px;margin:10px 0;line-height:1.8}
.hh-travel-feedback a{color:#8c5a28;text-decoration:underline}
.hh-travel-note{font-size:12px;color:#666666}
@media(max-width:767px){.hh-travel-discovery{padding-top:24px}.hh-travel-collection{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0}.hh-travel-members{gap:8px 16px}.hh-travel-intro{margin-bottom:24px}.hh-travel-nav a{font-size:12px;padding:8px 12px}}
/* Discovery audience links clear the native sticky navigation. */
.hh-travel-discovery > h2[id^="boxes-"]{scroll-margin-top:200px}
/* Discovery v2: audience tabs and compact, expandable collection cards. */
.hh-discovery-v2{max-width:1320px;padding-top:36px;padding-bottom:48px}
.hh-discovery-v2 .hh-travel-intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center;text-align:start;max-width:none;margin:0 0 32px;padding:24px 0}
.hh-discovery-v2 .hh-travel-intro h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.02em;margin-bottom:14px}
.hh-discovery-story>p:last-of-type{font-size:17px;line-height:1.8;max-width:600px;color:#555555}
.hh-discovery-facts{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:20px 0 0}
.hh-discovery-facts li{border:1px solid #e8e8e8;border-radius:24px;padding:7px 13px;font-size:12px;line-height:1.6}
.hh-discovery-v2 .hh-travel-offer{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;margin:0;padding:24px 28px;border-radius:16px;background:#111111;color:#ffffff}
.hh-discovery-v2 .hh-travel-offer>span{font-size:12px;color:#ffffff}
.hh-discovery-v2 .hh-travel-offer strong{font-size:36px;color:#ffffff;line-height:1.4}
.hh-discovery-v2 .hh-travel-offer p{color:#d9985f;margin:0;font-weight:600}
.hh-discovery-v2 .hh-travel-offer small{font-size:11px;line-height:1.9;color:#ffffff;opacity:.8}
.hh-discovery-v2 .hh-travel-nav{position:sticky;top:var(--hh-discovery-sticky-top,160px);z-index:20;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:#ffffff;border:1px solid #e8e8e8;padding:6px;border-radius:12px;margin:0 0 30px;box-shadow:0 3px 12px #11111108}
.hh-discovery-v2 .hh-travel-nav a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 10px;border:0;border-radius:8px;font-size:15px;font-weight:600;line-height:1.6}
.hh-discovery-v2 .hh-travel-nav small{min-width:22px;border-radius:20px;background:#11111108;font-size:11px;padding:1px 6px}
.hh-discovery-v2 .hh-travel-nav a[aria-selected="true"]{background:#111111;color:#ffffff}
.hh-discovery-v2 .hh-travel-nav a[aria-selected="true"] small{background:#ffffff24;color:#ffffff}
.hh-discovery-panel[hidden]{display:none}
.hh-discovery-group{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hh-discovery-group h2{font-size:24px;line-height:1.5;margin:0}
.hh-discovery-group p{color:#666666;font-size:12px;line-height:1.8;margin:0}
.hh-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.hh-discovery-v2 .hh-travel-collection{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;scroll-margin-top:190px;background:#ffffff;transition:border-color .15s,box-shadow .15s}
.hh-discovery-v2 .hh-travel-collection:hover{border-color:#b87333;box-shadow:0 8px 28px #11111108}
.hh-discovery-v2 .hh-travel-collection figure{position:relative;width:100%;background:#ffffff;border-bottom:1px solid #e8e8e8}
.hh-discovery-v2 .hh-travel-collection img{border-radius:0;aspect-ratio:1;object-fit:contain}
.hh-discovery-v2 .hh-travel-collection figcaption{position:absolute;bottom:12px;inset-inline-start:12px;background:#ffffff;border:1px solid #e8e8e8;border-radius:20px;padding:5px 10px;font-size:11px;color:#555555}
.hh-discovery-v2 .hh-travel-details{padding:22px;width:100%}
.hh-discovery-v2 .hh-travel-details h3{font-size:21px;line-height:1.5;margin:0 0 10px;color:#111111}
.hh-discovery-description{font-size:13px;line-height:1.9;color:#666666;margin:0 0 18px;min-height:50px}
.hh-discovery-scents{border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;margin:0 0 18px}
.hh-discovery-scents summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;padding:14px 0;cursor:pointer;font-size:13px;font-weight:600;color:#8c5a28}
.hh-discovery-scents summary::-webkit-details-marker{display:none}
.hh-discovery-expand{font-size:20px;font-weight:400;line-height:1;transition:transform .15s}
.hh-discovery-scents[open] .hh-discovery-expand{transform:rotate(45deg)}
.hh-discovery-v2 .hh-travel-members{grid-template-columns:minmax(0,1fr);gap:0;list-style-position:outside;padding-inline-start:20px;margin:0 0 14px;font-size:12px}
.hh-discovery-v2 .hh-travel-members li{padding:10px 0;border-bottom:1px solid #e8e8e8}
.hh-discovery-v2 .hh-travel-members li:last-child{border-bottom:0}
.hh-discovery-v2 .hh-travel-members span,.hh-discovery-v2 .hh-travel-members small{font-size:11px;line-height:1.8;margin-top:3px}
.hh-discovery-v2 .hh-travel-buy{justify-content:space-between;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.hh-discovery-v2 .hh-travel-buy strong{font-size:25px;line-height:1.4}
.hh-discovery-v2 .hh-travel-buy>span{font-size:11px;border-radius:20px;border:1px solid #e8e8e8;padding:4px 8px;color:#8c5a28}
.hh-discovery-v2 .hh-travel-form .btn{border-radius:8px;font-size:14px;min-height:48px;line-height:1.6;padding:10px 12px}
.hh-discovery-v2 .hh-travel-feedback{font-size:12px;min-height:0;margin:0;line-height:1.8}
.hh-discovery-v2 .hh-travel-feedback:not(:empty){margin-top:12px}
.hh-discovery-v2 .hh-travel-nav a:focus-visible,.hh-discovery-scents summary:focus-visible,.hh-discovery-v2 .btn:focus-visible,.hh-discovery-v2 .hh-travel-members a:focus-visible{outline:3px solid #b87333;outline-offset:3px}
.hh-discovery-how{display:flex;align-items:center;gap:20px;border:1px solid #e8e8e8;border-radius:14px;margin-top:32px;padding:24px}
.hh-discovery-how>span{color:#b87333;font-size:40px;line-height:1}
.hh-discovery-how strong{font-size:16px;color:#111111}
.hh-discovery-how p{font-size:12px;color:#666666;margin:6px 0 0;line-height:1.9}
@media(max-width:1100px){.hh-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.hh-discovery-v2{padding-top:20px}.hh-discovery-v2 .hh-travel-intro{grid-template-columns:minmax(0,1fr);gap:20px;padding:10px 0;margin-bottom:24px}.hh-discovery-v2 .hh-travel-intro h1{font-size:34px}.hh-discovery-story>p:last-of-type{font-size:14px}.hh-discovery-v2 .hh-travel-offer{padding:18px 22px;gap:3px}.hh-discovery-v2 .hh-travel-offer strong{font-size:30px}.hh-discovery-v2 .hh-travel-nav{margin-bottom:22px;gap:4px}.hh-discovery-v2 .hh-travel-nav a{font-size:13px;padding:10px 4px;gap:6px}.hh-discovery-group{gap:6px;margin-bottom:16px}.hh-discovery-group h2{font-size:22px}.hh-discovery-grid{grid-template-columns:minmax(0,1fr);gap:20px}.hh-discovery-v2 .hh-travel-collection img{aspect-ratio:4/3}.hh-discovery-v2 .hh-travel-details{padding:20px}.hh-discovery-description{min-height:0}.hh-discovery-how{padding:18px;gap:14px}.hh-discovery-v2 .hh-travel-members span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hh-discovery-v2 .hh-travel-collection,.hh-discovery-expand{transition:none}}
/* Real branch photographs and contact cards — module 716 only. */
html .module.module-banners_grid-716 { background: #ffffff; padding: 40px 24px; }
html .module.module-banners_grid-716 .banners-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
html .module.module-banners_grid-716 .module-item { width: auto; padding: 0; min-width: 0; }
html .module.module-banners_grid-716 .slide-content { height: 100%; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(17,17,17,.06); }
html .module.module-banners_grid-716 .slide-cols { display: flex; flex-direction: column; height: 100%; }
html .module.module-banners_grid-716 .slide-col { width: 100%; max-width: none; padding: 0; margin: 0; }
html .module.module-banners_grid-716 .slide-col-left .slide-layers { padding: 0; margin: 0; }
html .module.module-banners_grid-716 .slide-image { width: 100%; margin: 0; padding: 0; }
html .module.module-banners_grid-716 .slide-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: none; opacity: 1; }
html .module.module-banners_grid-716 .slide-col-right { flex: 1; padding: 24px; }
html .module.module-banners_grid-716 .slide-col-right .slide-layers { align-items: stretch; gap: 14px; text-align: start; }
html .module.module-banners_grid-716 .slide-text { width: 100%; margin: 0; padding: 0; color: #111111; }
html .module.module-banners_grid-716 .slide-text-item { color: #111111; font-size: 15px; line-height: 1.8; text-align: start; }
html .module.module-banners_grid-716 .module-subitem-2 .slide-text-item { font-size: 24px; font-weight: 700; line-height: 1.3; }
html .module.module-banners_grid-716 .module-subitem-6 { padding-top: 12px; border-top: 1px solid #e8e8e8; }
html .module.module-banners_grid-716 .slide-text-item::before { color: #b87333; }
html .module.module-banners_grid-716 .slide-button { margin-top: 6px; }
html .module.module-banners_grid-716 .slide-button .btn { background: #111111; color: #ffffff; border: 1px solid #111111; border-radius: 10px; padding: 12px 20px; text-decoration: none; }
html .module.module-banners_grid-716 .slide-button .btn:hover { background: #b87333; border-color: #b87333; }
html .module.module-banners_grid-716 .slide-button .btn:focus-visible { outline: 2px solid #b87333; outline-offset: 3px; }
@media (max-width: 900px) {
html .module.module-banners_grid-716 .banners-wrapper { grid-template-columns: 1fr; max-width: 520px; gap: 24px; }
html .module.module-banners_grid-716 { padding: 24px 16px; }
html .module.module-banners_grid-716 .slide-col-right { padding: 20px; }
}
/* Balanced pairs and readable capacity labels on narrow phones. */
@media (max-width: 480px) {
html[data-fsp-variant="atelier"] body .fs.fs .fs-sizes {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
html[data-fsp-variant="atelier"] body .fs.fs .fs-bottle:has(img[src*="/copper-unified/"])::after,
html[data-fsp-variant="atelier"] body .fs.fs .fs-bottle:has(img[src*="/Bottles/fs-studio-tola"])::after { content:none; }
/* Branch image zoom, directions and phone bidi — contact module only. */
html .module.module-banners_grid-716 .av-branch-phone { display: inline-block; direction: ltr; unicode-bidi: isolate; color: #111111; text-decoration: none; font-variant-numeric: tabular-nums; }
html .module.module-banners_grid-716 .slide-image { position: relative; }
html .module.module-banners_grid-716 .av-branch-photo-link { position: absolute; inset: 0; display: block; cursor: zoom-in; }
html .module.module-banners_grid-716 .av-branch-photo-hint { position: absolute; inset-inline-end: 14px; bottom: 14px; padding: 6px 12px; background: rgba(17,17,17,.85); color: #ffffff; border-radius: 20px; font-size: 13px; }
html .module.module-banners_grid-716 .slide-button .slide-button-group { display: flex; flex-wrap: wrap; gap: 10px; }
html .module.module-banners_grid-716 .slide-button .slide-button-group .btn { flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 12px; text-align: center; white-space: normal; }
html .module.module-banners_grid-716 .slide-button .slide-button-group .slide-button-2 { background: #b87333; border-color: #b87333; color: #ffffff; }
html .module.module-banners_grid-716 .slide-button .slide-button-group .slide-button-2:hover { background: #8c5a28; border-color: #8c5a28; }
.av-branch-viewer { max-width: min(94vw, 1100px); max-height: 94vh; padding: 16px; border: 1px solid #b87333; border-radius: 16px; background: #111111; color: #ffffff; overflow: auto; }
.av-branch-viewer::backdrop { background: rgba(17,17,17,.88); }
.av-branch-viewer img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
.av-branch-viewer p { margin: 12px 40px 0; text-align: center; color: #ffffff; }
.av-branch-viewer-close { position: absolute; inset-inline-end: 22px; top: 22px; z-index: 1; width: 40px; height: 40px; border: 1px solid #b87333; border-radius: 50%; color: #ffffff; background: #111111; font-size: 28px; cursor: pointer; line-height: 1; }
.av-branch-viewer-close:focus-visible, .av-branch-photo-link:focus-visible { outline: 2px solid #d9985f; outline-offset: 3px; }
@media (max-width: 600px) { .av-branch-viewer { padding: 10px; } .av-branch-viewer-close { top: 16px; inset-inline-end: 16px; } }
/* Original Arabiva decorative vectors for the three inspired-fragrance badges. */
#hh-identity-hero .hh-id-badge.hh-id-badge--illustrated {
gap:7px; padding:8px 12px; max-width:100%; box-sizing:border-box;
white-space:normal; line-height:1.5; color:#111111;
border-color:rgba(184,115,51,.24); background:#ffffff;
}
#hh-identity-hero .hh-id-badge--illustrated .hh-id-badge-vector {
display:block; flex:0 0 22px; width:22px; height:22px; color:#b87333;
}
#hh-identity-hero .hh-id-badge--illustrated > span { min-width:0; overflow-wrap:anywhere; }
/* Original copper wayfinding vectors — 2026-10-10 */
.av-vector-heading > .av-wayfinding-vector {
display: inline-block;
width: 28px;
height: 28px;
margin-inline-end: 9px;
vertical-align: -5px;
color: #b87333;
pointer-events: none;
}
.fs.fs .fs-head .fs-icon > .av-wayfinding-vector {
width: 28px;
height: 28px;
color: #b87333;
pointer-events: none;
}
@media (max-width: 480px) {
.av-vector-heading > .av-wayfinding-vector {
width: 24px;
height: 24px;
margin-inline-end: 7px;
vertical-align: -4px;
}
}
/* Inspired fragrance guidance alongside the existing note pyramid. */
.av-inspired-guide { margin-top: 14px; padding: 16px; border: 1px solid #e8e8e8; border-radius: 14px; background: #ffffff; color: #111111; }
.av-inspired-guide section + section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8e8e8; }
.av-inspired-guide h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.6; color: #111111; }
.av-inspired-guide p { margin: 0; font-size: 14px; line-height: 1.85; }
/* Footer row 5: leave room for the three navigation sections. */
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-1 { width: 35%; }
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-2 { width: 65%; }
html body footer .module-catalog-453 .auto-grid-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html body footer .module-catalog-453 .auto-grid-items > .module-item { width: auto; min-width: 0; margin: 0; }
html body footer .module-catalog-453 .catalog-title,
html body footer .module-catalog-453 .subitem a span { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 767px) {
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-1,
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-2 { width: 100%; }
html body footer .grid-row-5 .grid-items { width: 100%; padding: 24px; }
html body footer .module-catalog-453 .auto-grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols { display: flex; flex-wrap: wrap; }
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-1 { flex: 0 0 35%; min-width: 0; max-width: 35%; }
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col-2 { flex: 0 0 65%; min-width: 0; max-width: 65%; }
html body footer .grid-row-5 .grid-items,
html body footer .grid-row-5 .grid-item,
html body footer .module-catalog-453,
html body footer .module-catalog-453 .catalog-grid,
html body footer .module-catalog-453 .auto-grid-items { width: 100%; min-width: 0; }
html body footer .module-catalog-453 .auto-grid-items { padding: 0; margin: 0; }
@media (max-width: 767px) {
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col { flex: 0 0 100%; min-width: 0; max-width: 100%; }
}
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols > .grid-col { width: 100%; min-width: 0; max-width: none; }
html body footer .grid-row-5 .grid-items,
html body footer .grid-row-5 .grid-item,
html body footer .module-catalog-453 .catalog-grid { display: block; }
@media (max-width: 767px) {
html body footer .grid-row-5 > .grid-cols-wrapper > .grid-cols { grid-template-columns: minmax(0, 1fr); }
}
#content.mh-discovery-entry { width: 100%; max-width: 860px; margin-inline: auto; padding: 0; }
#content.mh-discovery-entry .panel-body { padding: 28px; }
#content.mh-discovery-entry h1 { font-size: 34px; line-height: 1.4; }
@media (max-width: 767px) { #content.mh-discovery-entry h1 { font-size: 28px; } #content.mh-discovery-entry .panel-body { padding: 20px; } }
/* Full-page guard is emitted after the head; override its inverted columns. */
@media (min-width: 768px) {
html body.hh-fullpage footer .grid-row-5 .grid-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 32px !important; }
html body.hh-fullpage footer .grid-row-5 .module-catalog .auto-grid-items { gap: 24px !important; }
}
/* Discovery: native 10ml custom six-scent picker. */
.hh-discovery-v2 .hh-travel-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.hh-custom-form{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:32px;align-items:start;padding:28px;border:1px solid #e8e8e8;border-radius:24px;background:#ffffff}
.hh-custom-picker label{font-size:20px;font-weight:600;color:#111111}
.hh-custom-picker>p{color:#666;line-height:1.8;margin:10px 0 18px}
.hh-custom-search-wrap{position:relative}
.hh-custom-search-wrap input{width:100%;min-height:52px;border:1px solid #ccc;border-radius:12px;padding:12px 16px;background:#ffffff;color:#111111;font:inherit}
.hh-custom-search-wrap input:focus-visible{outline:2px solid #b87333;outline-offset:2px}
.hh-custom-search-wrap [role="listbox"]{position:absolute;inset-inline:0;top:calc(100% + 8px);max-height:350px;overflow-y:auto;z-index:3;list-style:none;padding:6px;margin:0;border:1px solid #e8e8e8;border-radius:14px;background:#ffffff;box-shadow:0 12px 30px rgba(0,0,0,.1)}
.hh-custom-search-wrap [role="option"]{padding:12px;border-radius:9px;cursor:pointer}
.hh-custom-search-wrap [role="option"]:hover,.hh-custom-search-wrap [role="option"][aria-selected="true"]{background:#f6f6f6}
.hh-custom-search-wrap [role="option"] strong,.hh-custom-search-wrap [role="option"] span,.hh-custom-picks strong,.hh-custom-picks span,.hh-custom-picks small{display:block}
.hh-custom-search-wrap span,.hh-custom-picks span{font-size:13px;line-height:1.7;color:#666;overflow-wrap:anywhere}
.hh-custom-picks{padding-inline-start:24px;margin:18px 0 0}
.hh-custom-picks li{padding:14px 4px;border-bottom:1px solid #e8e8e8;position:relative;padding-inline-end:42px}
.hh-custom-picks li::marker{color:#b87333;font-weight:600}
.hh-custom-picks small{color:#8c5a28;margin-top:4px}
.hh-custom-picks button{position:absolute;inset-inline-end:0;top:12px;width:36px;height:36px;border:1px solid #e8e8e8;border-radius:50%;background:#ffffff;color:#111111;font-size:24px}
.hh-custom-picks button:focus-visible{outline:2px solid #b87333}
.hh-custom-summary{padding:24px;background:#f6f6f6;border-radius:18px}
.hh-custom-count{display:inline-block;border-radius:99px;padding:6px 12px;background:#ffffff;color:#8c5a28;font-weight:600}
.hh-custom-summary h3{margin:20px 0 10px;font-size:24px;color:#111111}
.hh-custom-summary p{line-height:1.8;color:#666}
.hh-custom-price{display:block;font-size:32px;color:#111111;margin:18px 0 8px}
.hh-custom-summary button[type="submit"]{width:100%;min-height:52px;border-radius:99px;background:#111111;border-color:#111111;color:#ffffff;margin-top:12px;white-space:normal}
.hh-custom-summary button[type="submit"]:disabled{opacity:.5}
.hh-custom-search-status{min-height:24px;font-size:14px;line-height:1.6;color:#8c5a28;margin:10px 0}
@media(max-width:767px){.hh-custom-form{grid-template-columns:1fr;padding:18px;gap:20px}.hh-discovery-v2 .hh-travel-nav{gap:4px}.hh-discovery-v2 .hh-travel-nav a{padding:10px 4px;font-size:13px}.hh-custom-summary{padding:20px}.hh-custom-search-wrap [role="listbox"]{max-height:280px}}