/* Accessories theme (Ecomus) — bridge between the Ecomus template CSS and
   Sylius' own pages/components rendered inside the Ecomus header/footer. */

body.acc-theme { background: #fff; }
body.acc-theme.rtl { font-family: 'Cairo', 'Albert Sans', sans-serif; }
body.acc-theme.rtl :is(h1, h2, h3, h4, h5, h6, .heading, .title, .tf-btn) { font-family: inherit; }

/* Theme colour from Settings drives the Ecomus accent. */
.acc-theme .tf-btn.btn-fill,
.acc-theme .count-box,
.acc-theme .toolbar-count { background-color: var(--primary); border-color: var(--primary); }
.acc-theme .tf-countdown-v3 { color: var(--primary); }

/* Header */
.acc-header .logo-header img.logo { height: var(--acc-logo-h, 72px); max-height: none; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 991px) { .acc-header .logo-header img.logo { height: calc(var(--acc-logo-h, 72px) * .7); } }
.acc-header .acc-logo-text,
.acc-footer .acc-logo-text { font-size: 26px; font-weight: 700; color: var(--main); letter-spacing: -.02em; }
.acc-header .nav-cart { position: relative; }
.acc-cart-widget .nav-icon-item { position: relative; }
.acc-header .box-nav-ul { flex-wrap: wrap; row-gap: 0; }
.acc-header .submenu-default .menu-list { max-height: 70vh; overflow-y: auto; }

/* Announcement */
.acc-announcement .noti-bar-text { margin: 0; }

/* Slideshow: keep copy readable on any photo. */
.acc-slideshow .wrap-slider img { width: 100%; object-fit: cover; }
.acc-slideshow .box-content .heading { text-wrap: balance; }

/* Product card */
.acc-card .product-img { aspect-ratio: 1 / 1; display: block; background: #f7f7f7; }
.acc-card .product-img img { width: 100%; height: 100%; object-fit: cover; }
.acc-card .acc-noimg { object-fit: contain !important; padding: 20%; opacity: .35; }
.acc-card .card-product-info .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acc-price .old-price { text-decoration: line-through; color: #8a8a8a; font-weight: 400; margin-inline-end: 6px; }
.acc-price .new-price { color: var(--primary); }
.acc-card .acc-badge-out { background: #555; color: #fff; }
.acc-card .on-sale-wrap { position: absolute; top: 10px; inset-inline: 10px; z-index: 5; }
.acc-quick-add form { display: contents; }
.acc-quick-add button.box-icon { cursor: pointer; padding: 0; }
.acc-quick-add .acc-quick-add-error { position: absolute; bottom: 100%; inset-inline-start: 0; background: #fff; color: #c00; font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.acc-quick-add .acc-quick-add-error ul { margin: 0; padding: 0; list-style: none; }

/* Categories: real taxon photos fill the circle; template icons stay centred. */
.acc-categories .collection-image.acc-taxon-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Gallery: product photos are square-cropped. */
.acc-gallery-img img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Footer */
.acc-footer .footer-logo img.logo { height: calc(var(--acc-logo-h, 72px) * .8); max-height: none; width: auto; }
.acc-locales { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 18px; }
.acc-locales-label { color: #545454; }

/* Sylius pages (listing, product, cart, checkout, account) inside the frame:
   keep Sylius' own Bootstrap look, just give the content room. */
.acc-main { min-height: 40vh; }
body.acc-theme:not([data-route="sylius_shop_homepage"]) .acc-main { padding: 30px 0 60px; }
.acc-main .btn-primary { background-color: var(--primary); border-color: var(--primary); }
.acc-main .btn-primary:hover { filter: brightness(.92); background-color: var(--primary); border-color: var(--primary); }

/* Ecomus hides the go-top until scrolling; main.js toggles .active-progress. */
.acc-go-top { cursor: pointer; }

/* The Sylius cart drawer must sit above the Ecomus backdrop (z-index 2000),
   like every Ecomus off-canvas (3000); below it the backdrop catches clicks. */
#offcanvasCart { z-index: 3000; }

@media (max-width: 1149px) {
    body.acc-theme { padding-bottom: 64px; }
}

/* RTL: Ecomus' arrows/icons are LTR; flip the directional ones. */
.rtl .acc-theme .icon-arrow1-top-left,
.rtl .tf-btn .icon-arrow-right,
body.rtl .tf-btn .icon-arrow1-top-left { transform: scaleX(-1); display: inline-block; }
body.rtl .tf-icon-box.style-row { text-align: right; }
body.rtl .collection-item-v4 .collection-content { text-align: right !important; }

/* Store-photo hero slides (no slides configured): like the Ecomus design,
   copy on top and the product/category photo below it on a soft panel. */
.acc-slide-generated { background: #f2f2f2; }
.acc-slideshow .wrap-slider { aspect-ratio: 1000 / 649; overflow: hidden; }
.acc-slideshow .wrap-slider > img { height: 100%; }
.acc-slide-generated > img { object-fit: contain !important; mix-blend-mode: multiply; padding: 36% 12% 3%; }
@media (max-width: 767px) {
    .acc-slideshow .wrap-slider { aspect-ratio: 4 / 5; }
    .acc-slide-generated > img { padding: 52% 8% 4%; }
}

/* Store-photo collection banners. */
.acc-banner-generated .collection-image { background: #f2f2f2; aspect-ratio: 1400 / 1609; display: block; }
.acc-banner-generated .collection-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 10% 10% 30%; }

/* Category circles: real photos cropped to the circle. */
.acc-categories .collection-item-circle .collection-image { display: block; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.acc-categories .collection-image.acc-taxon-photo img { width: 100%; height: 100%; object-fit: cover; }

.acc-reviews { margin-bottom: 70px; }
.acc-footer .footer-body { padding-top: 10px; }
.acc-footer .social-linkedin .acc-in { font-weight: 700; font-size: 13px; line-height: 1; }
.acc-slide-generated > img { padding-top: 30%; }

/* Sylius product grids with the Ecomus card. */
.acc-main .products-grid { gap: 30px 24px; }
.acc-main .products-grid .acc-card { height: 100%; }
@media (max-width: 767px) { .acc-main .products-grid { gap: 16px 12px; } }

/* Sylius' shop CSS sizes every `.icon` to a 28px box (meant for its SVG
   icons), which pins Ecomus font glyphs to the top-left of their buttons.
   Font icons size themselves; keep the box only for SVGs. */
.acc-theme i.icon,
.acc-theme span.icon { width: auto; height: auto; line-height: 1; display: inline-block; }
/* Sylius also mirrors every icon in RTL; Ecomus icons are mirrored per need. */
[dir=rtl] .acc-theme i.icon,
[dir=rtl] .acc-theme span.icon { transform: none; }
[dir=rtl] .acc-theme .tf-btn .icon-arrow-right,
[dir=rtl] .acc-theme .tf-btn .icon-arrow1-top-left { transform: scaleX(-1); }
.acc-slideshow .tf-btn { display: inline-flex; align-items: center; gap: 10px; }
.acc-slideshow .nav-sw .icon { font-size: 14px; }
.acc-slide-empty { background: #f2f2f2; }

.acc-header .wrapper-header { min-height: calc(var(--acc-logo-h, 72px) + 20px); }

/* Product page buy box (Ecomus product-detail "tf-product-info-buy-button"). */
.acc-qty { margin-bottom: 20px; }
.acc-qty .quantity-title { margin-bottom: 10px; }
.acc-qty .wg-quantity { width: 140px; }
.acc-qty .wg-quantity .btn-quantity { border: 0; background: transparent; padding: 0; }
.acc-qty .wg-quantity input.acc-qty-input { width: 60px; height: 46px; border: 0; background: transparent; box-shadow: none; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.acc-qty .wg-quantity input.acc-qty-input::-webkit-outer-spin-button,
.acc-qty .wg-quantity input.acc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acc-buy-box { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.acc-buy-row { display: flex; align-items: stretch; gap: 10px; }
.acc-theme .acc-buy-row .tf-btn.btn-add-to-cart { min-height: 52px; border-radius: 3px; background-color: var(--main, #000); border-color: var(--main, #000); color: #fff; }
.acc-theme .acc-buy-row .tf-btn.btn-add-to-cart:hover:not(:disabled) { background-color: #333; border-color: #333; }
.acc-buy-row .btn-add-to-cart:disabled { opacity: .45; cursor: not-allowed; }
.acc-buy-row .tf-product-btn-wishlist { width: 52px; min-width: 52px; height: 52px; border: 1px solid #ebebeb; border-radius: 3px; position: relative; }
.acc-buy-row .tf-product-btn-wishlist .icon { font-size: 18px; }
.acc-buy-row .tf-product-btn-wishlist:hover { background: var(--main, #000) !important; color: #fff; border-color: var(--main, #000); }
.acc-buy-now {
    width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .75rem;
    padding: .55rem 1rem; border: 0; border-radius: 3px; background: var(--primary); color: #fff;
    font-weight: 600; font-size: 16px; transition: filter .15s ease, transform .1s ease, opacity .15s ease;
}
.acc-buy-now:hover:not(:disabled) { filter: brightness(.92); }
.acc-buy-now:active:not(:disabled) { transform: translateY(1px); }
.acc-buy-now:disabled { opacity: .45; cursor: not-allowed; }
.acc-buy-now-icons { display: inline-flex; gap: .3rem; }
.acc-pay-icon { display: block; width: 34px; height: auto; border-radius: 4px; }
.acc-buy-now.is-loading .acc-buy-now-label::after {
    content: ""; display: inline-block; width: .9em; height: .9em; margin-inline-start: .5em; vertical-align: -.1em;
    border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: acc-spin .7s linear infinite;
}
@keyframes acc-spin { to { transform: rotate(360deg); } }

/* Language / currency pickers (Ecomus tf-cur). */
.acc-switchers { display: flex; align-items: center; gap: 18px; }
.acc-switch-btn { background: none; border: 0; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; color: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.acc-switch-btn .icon { font-size: 8px; }
.acc-switch-symbol { opacity: .7; }
.acc-switch-menu { min-width: 150px; font-size: 14px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); border: 0; padding: 6px; }
.acc-switch-menu .dropdown-item { border-radius: 4px; padding: 7px 12px; }
.acc-switch-menu .dropdown-item.active, .acc-switch-menu .dropdown-item:active { background: var(--main, #000); color: #fff; }
.acc-announcement { position: relative; }
.acc-topbar-switchers { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 40px; color: #fff; z-index: 5; }
.acc-topbar-switchers .acc-switch-btn { color: #fff; font-size: 13px; }
.acc-footer .acc-switchers { margin-top: 22px; }
.canvas-mb .bottom-bar-language .acc-switchers { gap: 24px; }
@media (max-width: 991px) { .acc-topbar-switchers { display: none !important; } }

/* Wishlist state: filled red heart (Ecomus red) when the product is saved. */
.acc-theme [data-acc-wishlist].acc-wished { color: var(--red_1, #db1215); }
.acc-theme [data-acc-wishlist].acc-wished .icon { color: var(--red_1, #db1215); }
.acc-theme .acc-buy-row [data-acc-wishlist].acc-wished { border-color: var(--red_1, #db1215); }
.acc-theme .acc-buy-row [data-acc-wishlist].acc-wished:hover { background: var(--red_1, #db1215) !important; color: #fff; }
.acc-theme .acc-buy-row [data-acc-wishlist].acc-wished:hover .icon { color: #fff; }
.acc-theme [data-acc-wishlist].is-busy { opacity: .6; pointer-events: none; }
.acc-wishlist-link { position: relative; }
.acc-wishlist-count[hidden] { display: none !important; }
@keyframes acc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.acc-bump { animation: acc-bump .45s ease; }

/* Product page urgency blocks (Ecomus product-detail). */
.acc-stock-badge { margin-bottom: 18px; }
.acc-product-countdown { margin-bottom: 22px; }
.acc-product-countdown .countdown-title p { margin: 0; }

/* Card colour dots (variant choice). */
.acc-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.acc-swatch { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ddd; padding: 2px; cursor: pointer; display: inline-flex; }
.acc-swatch .swatch-value { width: 100%; height: 100%; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.acc-swatch.active { border-color: var(--main, #000); box-shadow: 0 0 0 1px var(--main, #000); }
.acc-swatch.is-unavailable { opacity: .35; cursor: not-allowed; }
.acc-swatch.is-unavailable::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #777; transform: rotate(45deg); }
.acc-swatch .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--main, #000); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 20; pointer-events: none; }
.acc-swatch:hover .tooltip, .acc-swatch:focus-visible .tooltip { opacity: 1; visibility: visible; }

/* Quick-add modal (Ecomus #quick_add). */
.acc-quick-add-modal .modal-content { padding: 0; }
.acc-quick-add-modal .header { display: flex; justify-content: flex-end; padding: 14px 16px 0; }
.acc-quick-add-modal .header .icon-close { cursor: pointer; font-size: 14px; }
.acc-quick-add-modal .wrap { padding: 4px 28px 26px; }
.acc-quick-add-modal .tf-product-info-item { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.acc-quick-add-modal .tf-product-info-item .image img { width: 86px; height: 86px; object-fit: cover; border-radius: 6px; background: #f5f5f5; }
.acc-quick-add-modal .tf-product-info-item .content a { font-weight: 600; font-size: 16px; color: var(--main, #000); }
.acc-quick-add-modal .acc-quick-add-submit { min-height: 50px; background: var(--main, #000) !important; border-color: var(--main, #000) !important; color: #fff; }
.acc-quick-add-modal .acc-quick-add-submit:disabled { opacity: .45; }
.acc-quick-add-details { display: inline-block; margin-top: 14px; text-decoration: underline; font-size: 14px; }
.acc-quick-add-loading { display: flex; justify-content: center; padding: 60px 0; }
.acc-spinner { width: 28px; height: 28px; border: 3px solid #ddd; border-top-color: var(--main, #000); border-radius: 50%; animation: acc-spin .7s linear infinite; }

/* Account dashboard verify button: readable label. */
.acc-main .acc-verify-btn { color: var(--main, #000); }
.acc-main .acc-verify-btn:hover { color: #fff; }