/*
Theme Name: Aras Vogue
Theme URI: https://arasvogue.co.uk/
Author: Aras Vogue Team
Author URI: https://arasvogue.co.uk/
Description: Custom WooCommerce theme built specifically for Aras Vogue, originally forked from Axels.
Version: 1.1.14
Requires at least: 6.8
Tested up to: 6.9.4
Requires PHP: 7.4
WC requires at least: 9.6.0
WC tested up to: 10.6.1
License: GNU General Public License v2 or later4
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aras-vogue
Tags: e-commerce, block-patterns, block-styles, editor-style, full-site-editing, full-width-template
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
  display: block;
}

/* 
 * Manual Tailwind Layout Fixes
 * Injecting missing v4 responsive classes to prevent layout scattering 
 */
@media (min-width: 1024px) {
  .lg\:\!flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .lg\:w-91 {
    width: 22.75rem !important;
  }
}

/* ==========================================
 * WooCommerce My Account Dashboard Fixes
 * ========================================== */

/* Layout for My Account */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: left;
  width: 25%;
  padding-right: 2rem;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: right;
  width: 70%;
}
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    padding-right: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--wp--preset--color--neutral-light);
    position: relative;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation::after {
    content: "\2192";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3.5rem;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 1) 60%
    );
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.25rem;
    font-size: 1.2rem;
    color: var(--wp--preset--color--slate);
    pointer-events: none;
    padding-bottom: 0.5rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 2rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: none !important;
    padding: 0 !important;
    margin-right: 1.5rem;
    flex-shrink: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    background: transparent;
    padding: 0.5rem 0 1rem 0;
    border-radius: 0;
    display: inline-block;
    font-size: 1rem;
    white-space: nowrap;
    position: relative;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--wp--preset--color--black);
  }
  .woocommerce-account
    .woocommerce-MyAccount-navigation
    ul
    li.is-active
    a::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--wp--preset--color--black);
  }
}
.woocommerce-account .woocommerce::after {
  content: "";
  display: table;
  clear: both;
}

/* My Account Navigation Styling */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  text-decoration: none !important;
  font-weight: 500;
  color: var(--wp--preset--color--slate);
  transition: color 0.3s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--wp--preset--color--black);
}

body .u-columns.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  margin-top: 2rem !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Prevent clearfix pseudo-elements from becoming empty grid cells */
body .u-columns.woocommerce-Addresses::before,
body .u-columns.woocommerce-Addresses::after {
  display: none !important;
}
@media (max-width: 768px) {
  body .u-columns.woocommerce-Addresses {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}
body .u-columns.woocommerce-Addresses .woocommerce-Address {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body .woocommerce-Address-title {
  display: contents !important;
}
body .woocommerce-Address-title h2,
body .woocommerce-Address-title h3 {
  order: 1 !important;
  margin: 0 0 1rem 0 !important;
  font-size: 1.5rem !important;
  width: 100% !important;
  text-align: left !important;
}
body .woocommerce-Address address {
  order: 2 !important;
  font-style: normal !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
  width: 100% !important;
  text-align: left !important;
}
body .woocommerce-Address-title a.edit {
  order: 3 !important;
  margin-top: auto !important;
  display: inline-block !important;
  text-align: left !important;
}

/* Generic Button & Edit Links Fix */
.woocommerce-account .woocommerce-MyAccount-content a.edit,
.woocommerce-account .button {
  display: inline-block;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  padding: 0.75rem 1.5rem;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.875rem;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
}
.woocommerce-account .woocommerce-Address-title a.edit {
  margin-top: 0;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.woocommerce-account .woocommerce-MyAccount-content a.edit:hover,
.woocommerce-account .button:hover {
  background-color: var(--wp--preset--color--black);
}

/* Forms and Inputs */
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
  margin-bottom: 1.5rem;
}
.woocommerce-account .woocommerce-MyAccount-content form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--wp--preset--color--neutral-light);
  border-radius: 4px;
  background-color: var(--wp--preset--color--white);
}
.woocommerce-account .woocommerce-MyAccount-content form input:focus {
  border-color: var(--wp--preset--color--black);
  outline: none;
}

/* Orders Table */
.woocommerce-account
  .woocommerce-MyAccount-content
  table.woocommerce-orders-table,
.woocommerce-account
  .woocommerce-MyAccount-content
  table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
  padding: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--neutral-light);
  text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
  font-weight: 600;
  background-color: var(--wp--preset--color--cream);
}
.woocommerce-account .woocommerce-MyAccount-content table .button {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* Notifications mobile fix to allow button to drop */
@media (max-width: 768px) {
  /* Classic notice wrap */
  body .woocommerce-message,
  body .woocommerce-error,
  body .woocommerce-info {
    flex-wrap: wrap !important;
  }
}
/* Target buttons in both classic and block notices */
body .woocommerce-message .button,
body .woocommerce-error .button,
body .woocommerce-info .button,
body .wc-block-components-notice-banner .button,
body .wc-block-components-notice-banner__content a {
  margin-top: 1rem !important;
  float: none !important;
  display: block !important;
  width: fit-content !important;
  flex-basis: 100% !important;
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--white) !important;
  padding: 0.75rem 1.5rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  border: none !important;
  text-decoration: none !important;
  text-align: center !important;
}

/* ==========================================
 * Accordion Categories Full Fix (Restored from Tailwind)
 * ========================================== */
.accordion-categories {
  display: flex;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .accordion-categories {
    flex-wrap: wrap !important;
  }
}

.accordion-categories .accordion-trigger a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}

.accordion-categories > .group {
  width: 100%;
  height: 400px;
  position: relative;
  isolation: isolate;
  padding: 2rem;
  transition: all 0.3s ease-out;
  background-color: var(--wp--preset--color--black);
  overflow: hidden;
}

@media (min-width: 768px) {
  .accordion-categories > .group {
    width: 33.333333%;
    padding: 5rem 3.875rem;
  }
  .accordion-categories > .group:target {
    width: 66.666667%;
  }
}

@media (min-width: 1024px) {
  .accordion-categories > .group {
    width: 16.666667%; /* 2/12 */
    height: 800px;
  }
  .accordion-categories > .group:target {
    width: 33.333333%; /* 1/3 */
  }
}

.accordion-categories .wp-block-cover__inner-container {
  position: absolute !important;
  inset: 0;
}

.accordion-categories > .group:target .wp-block-cover__background {
  opacity: 0 !important;
}

.accordion-categories-inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-out;
  z-index: 20;
  width: 100%;
}

.accordion-categories > .group:target .accordion-categories-inner {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  transform: translateX(0) !important;
  width: 100% !important;
  height: auto !important;
  padding: 5rem 4rem 5rem 4rem !important;
}

@media (max-width: 1280px) {
  .accordion-categories .wp-block-heading {
    font-size: 1.875rem !important; /* text-3xl */
  }
  .accordion-categories > .group:target .accordion-categories-inner {
    padding: 1.25rem !important;
  }
}

.accordion-categories .wp-block-heading {
  letter-spacing: 4.5px;
  transform-origin: left;
  transform: rotate(270deg) translateX(50%);
  transition: all 0.3s ease-out;
  white-space: nowrap;
}

.accordion-categories > .group:target .wp-block-heading {
  transform: rotate(360deg) !important;
  white-space: normal !important;
}

.accordion-categories-footer {
  display: none;
  position: relative;
  z-index: 50;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.accordion-categories > .group:target .accordion-categories-footer {
  display: block !important;
  opacity: 1;
  margin-top: 2rem;
}

/* 1. Center the inner container and reset paddings/height ONLY on closed cards */
.accordion-categories > .group:not(:target) .accordion-categories-inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  min-height: auto !important;
  width: max-content !important;
}

/* 2. Rotate heading around its exact center and prevent text wrapping on closed cards */
.accordion-categories > .group:not(:target) .wp-block-heading {
  transform-origin: center !important;
  transform: rotate(270deg) !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .max-sm\:\!py-15 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }
  .max-sm\:\!pt-15 {
    padding-top: 3.75rem !important;
  }
  .max-sm\:\!px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .max-sm\:\!py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Custom arbitrary classes override to bypass Tailwind compilation dependency */
[class*="[&_a]:flex"] a,
[class*="[&_a]:!flex"] a {
  display: inline-flex !important;
}
[class*="[&_a]:items-center"] a {
  align-items: center !important;
}
[class*="[&_a]:!justify-center"] a {
  justify-content: center !important;
}
[class*="[&_img]:!ml-2.5"] img {
  margin-left: 0.625rem !important;
}
[class*="[&_a]:gap-1"] a {
  gap: 0.25rem !important;
}

/* Missing Tailwind arbitrary utility classes */
.\!hidden {
  display: none !important;
}
.\!font-bold {
  font-weight: 700 !important;
}
.\!inline-flex {
  display: inline-flex !important;
}

/* ==========================================
 * WooCommerce Product Reviews Form Styling
 * ========================================== */

/* Section wrapper */
#reviews {
  padding-top: 2rem;
}

/* "Be the first to review" heading */
#reviews #reply-title,
#reviews .woocommerce-Reviews-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
  font-family: var(--wp--preset--font-family--playfair-display) !important;
}

/* Star rating input */
.comment-form-rating label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.comment-form-rating .stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}
.comment-form-rating .stars a {
  font-size: 1.5rem !important;
  color: var(--wp--preset--color--neutral-light) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.comment-form-rating .stars:hover a,
.comment-form-rating .stars a:hover,
.comment-form-rating .stars a:hover ~ a {
  color: #b59a6c !important;
}
.comment-form-rating .stars.selected a.active,
.comment-form-rating .stars.selected a {
  color: #b59a6c !important;
}

/* "Your review" textarea label */
.comment-form-comment label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Review textarea */
.comment-form-comment textarea#comment,
#commentform textarea {
  width: 100% !important;
  min-height: 160px !important;
  padding: 1rem !important;
  border: 1px solid var(--wp--preset--color--neutral-light) !important;
  border-radius: 0 !important;
  background-color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  resize: vertical;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease;
}
.comment-form-comment textarea#comment:focus,
#commentform textarea:focus {
  border-color: var(--wp--preset--color--black) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Text inputs (name, email) in review form */
#commentform input[type="text"],
#commentform input[type="email"] {
  width: 100% !important;
  height: 52px !important;
  padding: 0 1rem !important;
  border: 1px solid var(--wp--preset--color--neutral-light) !important;
  border-radius: 0 !important;
  background-color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus {
  border-color: var(--wp--preset--color--black) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Submit button */
#commentform input#submit,
#commentform input[type="submit"],
#reviews .submit {
  display: inline-block !important;
  background-color: var(--wp--preset--color--black) !important;
  color: var(--wp--preset--color--white) !important;
  padding: 1rem 2.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  margin-top: 1rem !important;
}
#commentform input#submit:hover,
#commentform input[type="submit"]:hover,
#reviews .submit:hover {
  background-color: #b59a6c !important;
}

/* Required field note */
.comment-notes,
#commentform .comment-form-cookies-consent {
  font-size: 0.875rem;
  color: var(--wp--preset--color--slate);
  margin-bottom: 1rem;
}

/* Form row spacing */
#commentform .comment-form-rating,
#commentform .comment-form-comment,
#commentform .comment-form-author,
#commentform .comment-form-email {
  margin-bottom: 1.25rem;
}

/* "No reviews yet" message */
.woocommerce-noreviews {
  font-size: 1rem;
  color: var(--wp--preset--color--slate);
  margin-bottom: 1.5rem;
}



/* NEW STYLES */

/* ==========================================
 * Shop Page Mobile Layout Fixes
 * ========================================== */
@media (max-width: 768px) {
  /* Reduce bottom margin of shop breadcrumbs */
  body.archive.woocommerce-page .wc-block-breadcrumbs {
    margin-bottom: 2rem !important;
  }

  /* Remove large gap below the filter button container */
  body.archive.woocommerce-page .wp-block-group.max-xl\:\!gap-4 {
    gap: 0 !important;
  }

  /* Remove bottom margin below the open filter button */
  body.archive.woocommerce-page .wc-block-product-filters__open-overlay {
    margin-bottom: 0 !important;
  }
}

/* ==========================================
 * Product Filter Modal Overrides (Mobile/Tablet)
 * ========================================== */
@media (max-width: 1279px) {
  /* Force Show "Filter" Button */
  .wc-block-product-filters__open-overlay {
    display: flex !important;
  }

  /* Show Header and Footer inside Modal */
  .wc-block-product-filters__overlay-header,
  .wc-block-product-filters__overlay-footer {
    display: flex !important;
  }

  /* Reset Overlay to act as a hidden Modal by default */
  .wc-block-product-filters__overlay {
    position: fixed !important;
    background-color: transparent !important;
    pointer-events: none !important;
    inset: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
    transition: background-color 0.5s !important;
  }

  /* Show Overlay when activated */
  .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    background-color: rgba(95, 95, 95, 0.35) !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  }

  /* Reset Wrapper Dimensions */
  .wc-block-product-filters__overlay-wrapper {
    height: 100% !important;
    position: relative !important;
    width: 100% !important;
  }

  /* Make Dialog container hidden off-screen by default, full width/height */
  .wc-block-product-filters__overlay-dialog {
    display: flex !important;
    flex-direction: column !important;
    inset: 0 !important;
    position: absolute !important;
    transform: translateY(100vh) !important;
    max-height: 100% !important;
    background-color: #ffffff !important; /* Force white to fix transparency */
    color: #111111 !important;
    transition: transform 0.5s !important;
    gap: 2rem !important; /* User requested */
  }

  /* Slide Dialog up when activated */
  .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
    transform: translateY(0) !important;
  }

  /* User Requested Custom Paddings & Scroll */
  .wc-block-product-filters__overlay-header {
    padding-inline: calc(var(--spacing) * 4) !important;
    padding-top: calc(var(--spacing) * 4) !important;
  }

  .wc-block-product-filters__overlay-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: calc(var(--spacing) * 4) !important;
    overflow-y: auto !important; /* Use auto for better mobile scrolling */
  }

  .wc-block-product-filters__overlay-footer {
    padding: calc(var(--spacing) * 4) !important;
    margin-top: auto !important; /* Push footer to bottom */
  }
}