/* MDIX Fashion Niaga — audit fixes */

/* Theme demo language / currency switchers (English/French…, $ USD/€/£) do nothing. */
.header .top .left-side .drop-down-wrap { display: none !important; }

/* Hero: the slider layers were transparent model cut-outs; as rectangular photos they
   covered the headline and looked broken. Keep one photo per slide, hide the rest. */
#slide-5-layer-2,
#slide-6-layer-2,
#slide-7-layer-9,
#slide-7-layer-10 { display: none !important; }

/* Footer payments: keep Visa, Mastercard, Amex; hide Discover/Amazon/PayPal. */
.footer .payment-list li:nth-child(n + 4) { display: none; }

/* Brand strip contains only grey "LOGO" placeholders. */
.section-last:has(.item-logo) { display: none; }

/* Slide 3: white headline over a light, blurred photo — darken the photo slightly. */
#rev_slider_3_1 li[data-index="rs-7"] .slotholder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

/* ===== Design QA 2026-10-12 (mdix-fashion-niaga) ===== */

/* Top bar links (#8e8e93 on white = 3.3:1) → AA. */
.header .top:not(.dark-style) .menu a { color: #5f5f64; }

/* Product photos: every card now has its own photo with width/height attributes. */
.product-grid .thumb img,
.product-list .thumb img { width: 100%; height: auto; aspect-ratio: 270 / 350; object-fit: cover; }
.header .middle .right-side .cart-list-container .cart-list .thumb img { width: 70px; height: 70px; object-fit: cover; }
.shop-cart-table .product-thumbnail img { width: 90px; height: 117px; object-fit: cover; }
.mega-menu .adv li.col-xs-6 img { width: 100%; height: auto; aspect-ratio: 175 / 182; object-fit: cover; }
.widget_instagram img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.item-recent-post .thumb img { width: 80px; height: 80px; object-fit: cover; }
.item-blog-grid .thumb img { width: 100%; height: auto; aspect-ratio: 370 / 202; object-fit: cover; }
.item-blog-list .thumb img { width: 100%; height: auto; aspect-ratio: 400 / 250; object-fit: cover; }
.comment-author .avatar { width: 80px; height: 80px; object-fit: cover; }
.blog-detail .main-image, .blog-detail .alignleft { height: auto; }
.adv-main-content img { width: 100%; height: auto; }

/* Product gallery (detail page + quick view): four views of the same jacket. */
.product-detail .images .woocommerce-main-image img { width: 100%; height: auto; aspect-ratio: 435 / 590; object-fit: cover; }
.product-detail .images .thumbnails img { aspect-ratio: 435 / 590; object-fit: cover; }
@media (max-width: 559px) {
  .product-detail .thumbnails .zoom { width: calc(25% - 9px); margin-right: 12px; }
  .product-detail .thumbnails .zoom:last-child { margin-right: 0; }
  .product-detail .thumbnails img { width: 100%; height: auto; max-height: none; }
}
.summary .price del { color: #8a8a8a; font-size: 0.75em; margin-right: 8px; }
.summary .qv-more a { font-weight: 600; color: #1f7a62; }

/* "Tambah ke keranjang" was clipped inside a fixed 150×40 box. */
.summary .single_add_to_cart_button { width: auto; min-width: 150px; height: auto; min-height: 44px; padding: 10px 20px; white-space: nowrap; }

/* Newsletter band: white text sat on a light, blurred photo — darken the photo. */
.section-subscribe .background::after { content: ""; position: absolute; inset: 0; background: rgba(20, 24, 30, 0.6); pointer-events: none; }

/* Contact pages: keyless Google Maps embed fills the old JS map box. */
.mdix-map { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.map-absolute .mdix-map { position: absolute; inset: 0; }
@media (max-width: 767px) { .map-absolute .mdix-map { position: static; height: 200px; min-height: 200px; } }

/* Theme text colours that fail WCAG AA on white, darkened (D-20): #37bc9b→#1f7a62, #898c90→#5f6368, #8e8e93→#5f5f64, #e74c3c→#c0392b, #c7c7cc→#6e6e73. */
.btn-ajax-loading,
.product-grid .category,
.section-testimonials .slides-thumb .slick-arrow:before,
.slick-arrow-long .slick-arrow:before,
.tab-product-wrap .tab-controls a { color: #6e6e73; }
.blog-detail .author-info,
.blog-detail .simple-list,
.blog-detail .simple-list a,
.comment-list .comment-body .comment-metadata a,
.form-row-link a,
.header .middle .right-side .cart-list-container .cart-list .quantity,
.header .middle .right-side .search-toggle .search-container,
.header .middle .right-side .search-toggle .search-container .inp-search,
.header .middle .right-side .search-toggle.js__active a,
.header .middle .right-side > li > a,
.item-adv,
.item-adv p,
.item-blog-grid .desc,
.item-blog-list .desc,
.item-service p,
.item-service.with-number:before,
.main-menu-wrap .menu .sub-menu a,
.main-menu-wrap .menu > li > a,
.product-detail .woocommerce-main-image:before,
.product-grid .price del,
.product-list .desc,
.product-list .price del,
.shop-cart-table tbody .product-name .variation dt,
.shop-cart-table tbody .product-name p,
.shop-ordering .lbl-select,
.size-option .lbl-variant .lbl-text,
.summary .description,
.summary .product_meta span,
.summary .summary-bottom .text-list,
.summary .summary-bottom .text-list a,
.summary .summary-top a,
.summary .variants .variant-size .lbl-variant .lbl-text,
.text-content,
.text-content blockquote .author,
.widget_archive ul li,
.widget_categories ul li,
.widget_meta ul li,
.widget_nav_menu ul li,
.widget_pages ul li,
.woocommerce-checkout-payment .payment_box p,
.woocommerce-checkout-review-order-table tbody .product-name,
.woocommerce-result-count,
.woocommerce-tabs .tabs a { color: #5f6368; }
.header .middle .search-form .select-category .select2-container--default .select2-selection__rendered,
.header .top .menu a,
.item-why-choose-us p { color: #5f5f64; }
.blog-detail .author-info .name,
.comment-list .comment-body .comment-author a,
.comment-respond .inp-text,
.contact-info .title,
.header .bottom .right-side,
.header .middle .right-side .cart-list-container .cart-list .quantity .amount,
.item-service .title,
.page-large-title .woocommerce-breadcrumb span,
.product-grid .title,
.shop-cart-table *[data-title]:before,
.shop-cart-total .shop-cart-total-table .cart-grand-total td,
.summary .price,
.tab-product-wrap .tab-controls a.js__active,
.text-content a { color: #1f7a62; }
.header .bottom .right-side a,
.product-grid .price,
.product-list .price,
.text-content del,
.text-content strike { color: #c0392b; }
.main-menu-wrap .menu > li.current-menu-item > a { color: #1f7a62; }
.product-grid .category { border-bottom-color: #c7c7cc; }

/* Cart totals were uppercased ("RP1.007.000"). */
.shop-cart-total .shop-cart-total-table td { text-transform: none; }


/* Product card controls: readable size, ≥24px targets; always visible on touch screens (no hover). */
.product-grid .controls a { font-size: 12px; line-height: 28px; }
.product-grid .controls .fa { line-height: 28px; }
.product-grid .category { font-size: 12px; line-height: 15px; }
@media (hover: none), (max-width: 1024px) {
  .product-grid .controls, .product-grid .add_to_cart_button,
  .product-list .controls, .product-list .add_to_cart_button { opacity: 1 !important; transform: none !important; }
  .product-grid .add_to_cart_button { background: #fff; width: 44px; height: 44px; }
  .product-grid .add_to_cart_button:before { line-height: 40px; }
  .product-grid .timer-view { transform: translate(0, -38px); }
}

/* Revolution slider: reserve its height before the script runs (CLS was 0.51 on desktop). */
#rev_slider_3_1_wrapper { min-height: min(450px, calc(100vw * 450 / 1140)); }
.tp-caption.rev-btn { cursor: pointer; }

/* Phones: the slider shrinks to 6px text — show a simple static hero instead (slider hidden ≤767px). */
.mdix-mobile-hero { display: none; }
@media (max-width: 767px) {
  #rev_slider_3_1_wrapper { display: none !important; min-height: 0; }
  .mdix-mobile-hero { display: block; position: relative; overflow: hidden; min-height: 340px; color: #fff; }
  .mdix-mobile-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mdix-mobile-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65)); }
  .mdix-mobile-hero__body { position: relative; z-index: 1; padding: 64px 16px 40px; }
  .mdix-mobile-hero__kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; color: #9be3cf; }
  .mdix-mobile-hero__title { font-family: Montserrat, "Open Sans", sans-serif; font-size: 32px; line-height: 1.15; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
  .mdix-mobile-hero__title span { display: block; color: #ffcd02; }
  .mdix-mobile-hero__text { font-size: 15px; line-height: 1.5; margin: 0 0 20px; max-width: 32ch; color: #fff; }
  .mdix-mobile-hero__btn { display: inline-block; min-height: 44px; padding: 11px 22px; background: #1f7a62; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .mdix-mobile-hero__btn:hover, .mdix-mobile-hero__btn:focus { background: #155c49; color: #fff; }
}

/* Phone header (home): category select hidden, one-line search, so the menu button sits in the first screen row. */
@media (max-width: 479px) {
  .header .middle:has(.search-form) { padding-top: 76px; padding-bottom: 14px; }
  .header .middle .search-form { padding: 4px 50px 4px 4px; }
  .header .middle .search-form .select-category { display: none; }
  .header .middle .search-form .inp-search { margin: 0; height: 38px; }
  .header .middle .search-form .inp-submit { position: absolute; top: 2px; right: 2px; width: 42px; height: 42px; }
}

/* Phone/tablet menu: slide-in drawer over the page (the theme pushed the whole page 380px aside,
   wider than a 360px phone). Closed drawer is hidden so its links are not focusable. */
@media (max-width: 1024px) {
  html.js__menu_active #wrapper { position: static; transform: none !important; overflow: visible; }
  html.js__menu_active .mobile-sticky { transform: translate(0, -120%); }
  html.js__menu_active .mobile-sticky.js__active { transform: translate(0, 0); }
  .menumobile-navbar { width: min(380px, 86vw); z-index: 1001; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .menumobile-navbar.js__menu_active { transform: none; visibility: visible; transition: transform .3s ease; box-shadow: -8px 0 24px rgba(0,0,0,.35); }
  html.js__menu_active body::after { content: ""; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); }
  .menumobile-navbar-wrapper { display: block; }
  .menumobile-close-btn { min-height: 44px; line-height: 44px; cursor: pointer; }
  .menumobile-navbar #menu-mobile .menu > li > a { min-height: 44px; }
}

/* Contact page 2: day labels wrapped ("Senin–/Jumat:"). */
.contact-info .time { white-space: nowrap; }

/* Newsletter button: arrow icon wrapped under the longer Indonesian label; grey button failed AA. */
.subscribe-form .btn-submit .fa { display: none; }
.subscribe-form .btn-submit { background: #4b4f54; white-space: nowrap; }

/* Cart on phones: "Pengiriman:" label touched its value. */
.shop-cart-table *[data-title]:before { width: auto; min-width: 84px; margin-right: 8px; }

/* Menu button stays on top of the open drawer (bars turn into a white ×). */
@media (max-width: 1024px) {
  html.js__menu_active .menumobile-toggle { position: relative; z-index: 1002; }
  html.js__menu_active .menumobile-toggle .icon-bar { background-color: #fff; }
}

/* Visually hidden labels (icon-only buttons, slider arrows). */
.mdix-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-size: 12px; }

/* Touch targets on phones: footer lists, header WhatsApp number, slider dots. */
@media (max-width: 1024px) {
  .footer .widget_nav_menu a, .footer .contact-list a, .footer .copyright a { display: inline-block; min-height: 24px; padding: 3px 0; }
  .header .bottom .right-side a { display: inline-block; min-height: 24px; padding: 1px 0; }
  .slick-dots li button { min-width: 24px; min-height: 24px; }
}
.product-grid .controls { background: #222; }
.product-grid .add_to_cart_button { color: #1f7a62; border-color: #1f7a62; }
.item-blog-grid .post-meta li { color: #6b6b70; }

/* Green buttons/labels with white text (#37bc9b = 2.4:1) → darker brand green (D-20). */
.btn-ajax-loading.style--2, .button-green, .comment-list .comment-body .comment-reply-link, .comment-respond .inp-submit,
.header .middle .inp-submit, .join-form .inp-submit, .main-menu-wrap .menu .mega-menu-wrap .mega-menu .adv .button-adv,
.size-option .lbl-variant .lbl-radio:checked + .lbl-text, .summary .variants .variant-size .lbl-variant .lbl-radio:checked + .lbl-text,
.widget-price-filter .filter-submit { background-color: #1f7a62; }
.item-service-2.red-style { background-color: #c0392b; }
.item-service-2.green-style { background-color: #1f7a62; }
.item-service-2.yellow-style { background-color: #ffcd02; color: #2b2b2b !important; }
.product-list .controls { background: #222; }
.item-blog-grid .post-meta, .item-blog-list .post-meta, .item-recent-post .post-date, .blog-detail .post-meta, .blog-detail .post-meta a { color: #6b6b70; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6b6b70; }
.woocommerce-checkout-review-order-table small { font-size: 12px; }

/* Quantity steppers: 24×24 buttons (were 20×21). */
.summary .quantity input[type="number"], .shop-cart-table .quantity input[type="number"] { height: 48px; }
.summary .quantity button, .shop-cart-table .quantity button { width: 24px; height: 25px; font-size: 11px; }
.shop-cart-table .product-remove .remove { display: inline-block; min-width: 24px; min-height: 24px; }

/* Phones/tablets: small inline links get a 24px tap height. */
@media (max-width: 1024px) {
  .woocommerce-breadcrumb a, .summary-top a, .summary .summary-bottom .text-list a, .blog-detail .simple-list a,
  .blog-detail .post-meta a, .item-blog-list .readmore, .product-list .post-meta a, .shop-cart-table .product-name .title,
  .item-contact a, .product-list .controls a { display: inline-block; min-height: 24px; line-height: 24px; }
  .shop-cart-table .product-thumbnail a, .product-list .thumb > a { display: block; }
  .product-list .controls a { font-size: 12px; line-height: 28px; }
}
.item-blog-grid.full-info .post-meta, .blog-detail .top .post-meta, .blog-detail .top .post-meta a { color: #6b6b70; }

/* Contact 1: the theme sized the left map box with its Google Maps script; size it in CSS now. */
@media (min-width: 768px) { .section-map .map-absolute { width: calc(50% - 125px); } }
@media (min-width: 992px) { .section-map .map-absolute { width: calc(50% - 162px); } }
@media (min-width: 1200px) { .section-map .map-absolute { width: calc(50% - 195px); } }
.product-list .add_to_cart_button .mdix-sr { position: static !important; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; font-size: inherit; }
.product-list .add_to_cart_button { display: inline-block; width: auto; min-width: 160px; padding-left: 18px; padding-right: 18px; white-space: nowrap; }
@media (max-width: 1024px) { .contact-info a { display: inline-block; min-height: 24px; line-height: 24px; } }

/* Home store cards (Wanita/Pria/Anak): the photo covered the start of the text at 992–1440px. */
.section-adv .item-adv, .item-adv { display: flex; align-items: center; }
.item-adv:after { display: none; }
.item-adv img.thumb { position: relative; flex: 0 0 auto; align-self: stretch; height: auto; min-height: 162px; object-fit: cover; }
.item-adv .content { float: none; flex: 1 1 auto; max-width: none; width: auto; padding: 24px 12px; }
.item-adv p { font-size: 13px; }
.item-adv .btn-common { color: #5f6368; }