/*
 * Dubai Cosmetics theme layer on top of the design stylesheet (design.css).
 * Fallback header and footer, WooCommerce loop adjustments, Elementor harmony.
 * Designed and developed by Hasnain Khan, https://hasnain.io
 */

/* Expose the tokens as --dc-* for the companion plugin's widgets. */
:root {
	--dc-ink: var(--ink, #3A0E1A);
	--dc-accent: var(--accent, #C61531);
	--dc-line: var(--line, #EFE4E0);
	--dc-surface: var(--surface, #F7F1EE);
}

.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; }
.dc-skip:focus { clip: auto; height: auto; width: auto; background: #fff; padding: 8px 12px; z-index: 100; }

.dc-content { padding-top: 32px; padding-bottom: 56px; }
.dc-entry { margin: 24px 0; }

/* ---------- Prototype chrome inside Elementor ----------
   Elementor wraps every widget in boxes of its own. For the prototype's header, footer and home
   those wrappers must not change the layout: the header has to stay sticky against <body>, and
   widgets must not get Elementor's extra spacing. */
.elementor-location-header,
.elementor-location-header > .e-con,
.elementor-location-header > .e-con > .e-con-inner,
.elementor-location-header .elementor-widget-dc-header,
.elementor-location-header .elementor-widget-dc-header > .elementor-widget-container { display: contents !important; }
.dc-proto-header, .dc-proto-footer, .dc-proto-home { --kit-widget-spacing: 0px; --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
.dc-proto-header .elementor-widget:not(:last-child), .dc-proto-footer .elementor-widget:not(:last-child), .dc-proto-home .elementor-widget:not(:last-child) { margin-block-end: 0 !important; }
.dc-proto-header .elementor-widget-container, .dc-proto-footer .elementor-widget-container, .dc-proto-home .elementor-widget-container { padding: 0; }
/* The prototype's <main> is a plain block; a flex column would let widget wrappers shrink below their content. */
.dc-proto-header, .dc-proto-footer, .dc-proto-home, .dc-proto-header > .e-con-inner, .dc-proto-footer > .e-con-inner, .dc-proto-home > .e-con-inner { display: block !important; gap: 0 !important; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
body.admin-bar .overlay { top: 0; }

/* The page is the prototype: its own base styles (Tailwind preflight) apply to the whole page. */
.dc-theme main#content { display: block; }

/* ---------- Product card polish ---------- */
.pcard a, .dc-brands a, .dc-circles a, .dc-footer a, .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.pcard__name a:hover { color: var(--accent, #C61531); }
.pcard__body .label { margin: 0; }
.pcard__name { margin: 4px 0 0; font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.35; }
.pcard__price { margin: 0; }
.pcard__strip { display: flex; padding: 0 10px; }
.pcard__strip span { color: var(--accent, #C61531); }

/* Wishlist heart, drawn in CSS because YITH prints only text. */
.pcard__wish .yith-wcwl-add-to-wishlist a { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; font-size: 0; line-height: 0; color: transparent; text-indent: -999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0E1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 4px 14px rgba(42, 9, 18, .1); transition: transform .35s var(--ease, ease); }
.pcard__wish .yith-wcwl-add-to-wishlist a:hover { transform: scale(1.08); }
.pcard__wish .yith-wcwl-wishlistaddedbrowse a, .pcard__wish .yith-wcwl-wishlistexistsbrowse a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C61531' stroke='%23C61531' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
.pcard__wish .feedback, .pcard__wish .yith-wcwl-add-button > span { display: none; }
.pcard__wish .yith-wcwl-add-to-wishlist { margin: 0; }

/* ---------- Brand colours for WooCommerce widgets (they inherit the kit's Gold accent) ---------- */
.dc-product__price .price, .dc-product__price .price .amount { color: var(--ink, #3A0E1A); }
.dc-product__price .price ins, .dc-product__price .price ins .amount { color: var(--accent, #C61531); }
.woocommerce span.onsale, .onsale.chip { background: var(--accent, #C61531); color: #fff; border-radius: 999px; min-height: 0; min-width: 0; line-height: 1; padding: 6px 10px; font-size: 11px; font-weight: 700; }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce a.button.alt, .dc-product__cart .single_add_to_cart_button,
.dc-cart .checkout-button, .dc-checkout #place_order { background: var(--accent, #C61531) !important; color: #fff !important; border-radius: 999px !important; border: 0; }
.woocommerce .button.alt:hover, .dc-product__cart .single_add_to_cart_button:hover { background: var(--ink, #3A0E1A) !important; }
.dc-product__cart .single_add_to_cart_button.disabled, .dc-product__cart .single_add_to_cart_button:disabled { opacity: .45; }
.woocommerce-breadcrumb { font-size: 12.5px; }
.dc-back-to-category { text-align: left; margin: 12px 0 0; }
.dc-back-to-category .button { background: var(--surface, #F7F1EE); color: var(--ink, #3A0E1A); border-radius: 999px; padding: 10px 18px; font-size: 13px; }

/* ---------- Product grids on archive pages (until the collection page is rebuilt from the prototype) ---------- */
.dc-proto-root ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 750px) { .dc-proto-root ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 990px) { .dc-proto-root ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dc-proto-root ul.products li.product { width: auto; margin: 0; float: none; }
.dc-proto-root .elementor-widget-wc-archive-products ul.products { --grid-template-columns: unset; }

/* Search feels instant: short panel motion, no staggered reveals, and a highlight for keyboard navigation. */
#search-overlay { transition-delay: .2s; }
#search-overlay.is-open { transition-delay: 0s; }
#search-overlay .overlay__backdrop { transition-duration: .2s; }
#search-overlay .overlay__panel,
#search-overlay .overlay__panel--drop,
#search-overlay .overlay__fade { transition-duration: .22s, .18s; transition-delay: 0s; }
#search-overlay .stagger > *, #search-overlay [data-search-body] * { animation: none !important; }
#search-overlay .s-sugg.is-active { color: var(--accent); background: rgba(0,0,0,.04); border-radius: 8px; box-shadow: -8px 0 0 rgba(0,0,0,.04), 8px 0 0 rgba(0,0,0,.04); }
#search-overlay .pcard__name a.is-active { color: var(--accent); text-decoration: underline; }

/* The widgets wrap their markup in one element that carries the configuration; it must not create a box
   (the sticky header relies on #site-header sitting directly in the page flow). */
[data-site-header], [data-site-footer], [data-overlays] { display: contents; }

/* Product page: option cards and pills for variable products, in the design's own style. */
.var-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.var-card:hover { border-color: var(--ink); }
.var-card.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.var-card.is-out { opacity: .55; cursor: not-allowed; }
.var-card__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; display: grid; place-items: center; }
.var-card.is-on .var-card__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.var-pill { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 500; transition: border-color .25s, background-color .25s, color .25s; }
.var-pill:hover:not(:disabled) { border-color: var(--ink); }
.var-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.var-pill:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* ===== Checkout: WooCommerce's form in the design's style ===== */
.dc-proto-root .dc-form .form-row { margin: 0; padding: 0; width: 100% !important; float: none !important; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.dc-proto-root .dc-form .form-row label { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0; }
.dc-proto-root .dc-form .form-row label .optional { font-weight: 400; color: var(--muted); }
.dc-proto-root .dc-form .form-row .required { color: var(--accent); text-decoration: none; border: 0; }
.dc-proto-root .dc-form .woocommerce-input-wrapper { display: block; }
.dc-proto-root .dc-form .woocommerce-input-wrapper strong { font-weight: 400; font-size: 14px; }
.dc-proto-root .dc-form input.input-text, .dc-checkout select, .dc-checkout textarea, .dc-checkout .select2-container--default .select2-selection--single {
  width: 100%; font: inherit; font-weight: 400; font-size: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 14px; outline: none; height: auto; box-shadow: none; transition: border-color .3s, box-shadow .3s; }
.dc-proto-root .dc-form .select2-container--default .select2-selection--single { height: 46px; padding: 0 14px; display: flex; align-items: center; }
.dc-proto-root .dc-form .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.2; color: inherit; }
.dc-proto-root .dc-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.dc-proto-root .dc-form input.input-text:focus, .dc-checkout select:focus, .dc-checkout textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(58,14,26,.07); }
.dc-proto-root .dc-form textarea { resize: vertical; min-height: 96px; }
.dc-proto-root .dc-form .woocommerce-invalid input.input-text, .dc-checkout .woocommerce-invalid select, .dc-checkout .woocommerce-invalid .select2-selection--single { border-color: var(--accent); }
.dc-proto-root .dc-form .woocommerce-validated input.input-text { border-color: #9cc7a3; }
.dc-proto-root .dc-form .dc-cell { min-width: 0; }
.dc-proto-root .dc-form .woocommerce-NoticeGroup, .dc-checkout .woocommerce-error { margin-bottom: 16px; }
/* payment methods as cards */
#payment.woocommerce-checkout-payment, .dc-proto-root .dc-form #payment { background: transparent; border-radius: 0; padding: 0; }
.dc-proto-root .dc-form .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dc-proto-root .dc-form .wc_payment_methods > li { position: relative; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; transition: border-color .3s, background-color .3s; }
.dc-proto-root .dc-form .wc_payment_methods > li > input[type=radio] { position: absolute; opacity: 0; }
.dc-proto-root .dc-form .wc_payment_methods > li > label { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; cursor: pointer; margin: 0; }
.dc-proto-root .dc-form .wc_payment_methods > li > label::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid #cdbfbf; transition: border .25s; }
.dc-proto-root .dc-form .wc_payment_methods > li:has(> input:checked) { border-color: var(--ink); background: var(--ivory); }
.dc-proto-root .dc-form .wc_payment_methods > li:has(> input:checked) > label::before { border: 6px solid var(--ink); }
.dc-proto-root .dc-form .wc_payment_methods > li:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-proto-root .dc-form .wc_payment_methods > li > label img { max-height: 24px; width: auto; margin-left: auto; }
.dc-proto-root .dc-form .payment_box { margin: 12px 0 0; padding: 0; background: transparent; font-weight: 400; font-size: 13px; color: var(--muted); }
.dc-proto-root .dc-form .payment_box::before { display: none; }
.dc-proto-root .dc-form .payment_box p { margin: 0 0 8px; }
.dc-proto-root .dc-form .place-order { margin-top: 16px; }
/* terms and account checkboxes */
.dc-proto-root .dc-form .woocommerce-terms-and-conditions-wrapper { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.dc-proto-root .dc-form .woocommerce-privacy-policy-text { margin-bottom: 10px; }
.dc-proto-root .dc-form .woocommerce-terms-and-conditions-wrapper label.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.dc-proto-root .dc-form input.woocommerce-form__input-checkbox:not(.fbt) { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--line); background: #fff center/12px no-repeat; transition: background-color .25s, border-color .25s; }
.dc-proto-root .dc-form input.woocommerce-form__input-checkbox:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.dc-proto-root .dc-form .check-row input.woocommerce-form__input-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.dc-proto-root .dc-form .check-row input.woocommerce-form__input-checkbox:checked + .fbt-box { background: var(--ink); border-color: var(--ink); color: #fff; }
/* summary */
.dc-sum .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.dc-sum .order-total dd, .dc-sum .order-total dd .amount { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 400; }
.dc-sum .order-total dd strong { font-weight: 400; }
.dc-sum .woocommerce-remove-coupon { font-size: 12px; margin-left: 6px; text-decoration: underline; }
.dc-proto-root .dc-form .woocommerce-checkout-review-order-table { width: 100%; }
/* notices anywhere in the design's pages */
.woocommerce-notices-wrapper ul.woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-NoticeGroup ul.woocommerce-error { list-style: none; margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; background: var(--blush, #fbe9e7); border: 1px solid var(--line); font-size: 13.5px; }
.woocommerce-notices-wrapper ul.woocommerce-error li, .woocommerce-NoticeGroup ul.woocommerce-error li { margin: 2px 0; color: var(--accent); }
.dc-proto-root .dc-form form.login, .dc-proto-root .dc-form form.register, .dc-proto-root .dc-form form.lost_reset_password { border: 0; padding: 0; margin: 24px 0 0; border-radius: 0; }
.dc-proto-root .dc-form .woocommerce-form-login .woocommerce-form__label-for-checkbox { display: flex; }
.dc-proto-root .dc-account .woocommerce-address-fields .form-row, .dc-proto-root .dc-account .woocommerce-EditAccountForm .form-row { margin-bottom: 14px; }
.dc-proto-root .dc-account button[type=submit]:not(.btn), .dc-proto-root .dc-account .woocommerce-Button { background: var(--ink); color: #fff; border-radius: 999px; height: 48px; padding: 0 26px; font-weight: 600; border: 0; cursor: pointer; }
.dc-proto-root .dc-account .woocommerce-Address { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: #fff; }
.dc-proto-root .dc-account .woocommerce-Addresses { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dc-proto-root .dc-account .woocommerce-Addresses::before, .dc-proto-root .dc-account .woocommerce-Addresses::after { display: none; }
.dc-proto-root .dc-account .woocommerce-Addresses .col-1, .dc-proto-root .dc-account .woocommerce-Addresses .col-2 { float: none; width: auto; }
.dc-proto-root .dc-account h2, .dc-proto-root .dc-account h3 { font-family: 'Fraunces', serif; font-weight: 400; }

/* Payment method boxes: no grey panel or speech-bubble arrow; the box simply opens inside its card. */
.dc-proto-root .dc-form #payment, .dc-proto-root .dc-form #payment .wc_payment_methods { background: transparent !important; border: 0; border-radius: 0; padding: 0; }
.dc-proto-root .dc-form #payment div.payment_box { background: transparent !important; color: var(--muted); padding: 0 !important; margin: 14px 0 0 !important; border-radius: 0; box-shadow: none; }
.dc-proto-root .dc-form #payment div.payment_box::before, .dc-proto-root .dc-form #payment div.payment_box::after { display: none !important; }
.dc-proto-root .dc-form #payment div.payment_box fieldset { border: 0; padding: 0; margin: 0; background: transparent; }
.dc-proto-root .dc-form #payment div.payment_box .woocommerce-notice, .dc-proto-root .dc-form #payment div.payment_box .woocommerce-error, .dc-proto-root .dc-form #payment div.payment_box .woocommerce-info { background: var(--blush, #fbe9e7); border: 0; border-radius: 12px; padding: 12px 14px; margin: 0; color: var(--ink); font-size: 13px; }
.dc-proto-root .dc-form #payment div.payment_box input[type=text], .dc-proto-root .dc-form #payment div.payment_box input[type=tel], .dc-proto-root .dc-form #payment div.payment_box .wc-stripe-elements-field, .dc-proto-root .dc-form #payment div.payment_box .StripeElement { border-radius: 14px; }
.dc-proto-root .dc-form #payment .wc_payment_methods > li { background: #fff; list-style: none; }
.dc-proto-root .dc-form #payment .wc_payment_methods > li::marker { content: none; }
.dc-proto-root .dc-form #payment .wc_payment_methods > li:has(> input:checked) { background: var(--ivory); }
.dc-proto-root .dc-form #payment .place-order { padding: 0; background: transparent; }

/* Reserve space for the areas the scripts fill in, so the footer does not jump when they appear. */

.dc-proto-root [data-cart-page], .dc-proto-root [data-checkout-root] { min-height: 60vh; }
.dc-proto-root [data-wishlist] [data-wish-page] { min-height: max(1060px, calc(var(--wish-r2, 0) * 330px)); }
@media (min-width: 1024px) { .dc-proto-root [data-wishlist] [data-wish-page] { min-height: max(910px, calc(var(--wish-r4, 0) * 470px)); } }

/* Payment cards: win over third-party "payment cards" CSS (old snippets paste a rule with padding:0 and overflow:hidden). */
.woocommerce-checkout .dc-proto-root .dc-form ul.wc_payment_methods > li.wc_payment_method { padding: 14px 16px; overflow: visible; border: 1.5px solid var(--line); border-radius: 16px; }
.woocommerce-checkout .dc-proto-root .dc-form ul.wc_payment_methods > li.wc_payment_method > label { padding: 0 !important; gap: 12px; font-weight: 600; color: inherit; }