/*
Theme Name: asbjewelers
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: asbjewelers Tailwind CSS v4 theme.
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: asbjewelers
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Tailwind v4 content discovery without tailwind.config.js */
@source "./*.php";
@source "./inc/**/*.php";
@source "./template-parts/**/*.php";
@source "./js/**/*.js";

/* Use class-based dark variant driven by html.dark */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --color-gold-50: #fff8e6;
  --color-gold-100: #fef0cc;
  --color-gold-200: #fbdc99;
  --color-gold-300: #f4c86a;
  --color-gold-400: #e3b34a;
  --color-gold-500: #c9971f;
  --color-gold-600: #a87b14;
  --color-gold-700: #875f10;
  --color-gold-800: #6f4d10;
  --color-gold-900: #5c410f;
}

@layer base {
  :root {
    color-scheme: dark;
    --color-gold-50: #fff8e6;
    --color-gold-100: #fef0cc;
    --color-gold-200: #fbdc99;
    --color-gold-300: #f4c86a;
    --color-gold-400: #e3b34a;
    --color-gold-500: #c9971f;
    --color-gold-600: #a87b14;
    --color-gold-700: #875f10;
    --color-gold-800: #6f4d10;
    --color-gold-900: #5c410f;
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --color-gold-50: #fff8e6;
    --color-gold-100: #fef0cc;
    --color-gold-200: #fbdc99;
    --color-gold-300: #f4c86a;
    --color-gold-400: #e3b34a;
    --color-gold-500: #c9971f;
    --color-gold-600: #a87b14;
    --color-gold-700: #875f10;
    --color-gold-800: #6f4d10;
    --color-gold-900: #5c410f;
    --color-zinc-50: #0a0a0a;
    --color-zinc-100: #171717;
    --color-zinc-200: #262626;
    --color-zinc-300: #404040;
    --color-zinc-400: #525252;
    --color-zinc-500: #737373;
    --color-zinc-700: #a3a3a3;
    --color-zinc-800: #d4d4d4;
    --color-zinc-900: #f5f5f5;
    --color-zinc-950: #fafafa;
  }

  :root[data-theme="light"] .text-zinc-950 {
    color: #0a0a0a ;
    
  }

  

  html,
  body {
    @apply bg-zinc-950 text-zinc-100 antialiased;
    
  }

  a {
    @apply text-zinc-300 transition-colors hover:text-gold-500;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-zinc-50;
  }

  input,
  select,
  textarea,
  button {
    @apply rounded border border-zinc-800/50 bg-zinc-800/30 text-zinc-100 px-3 py-2;
  }

  button {
    border: 0;
  }

  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    @apply outline-none ring-0 shadow-none;
  }
}

@layer components {
  .site-shell {
    @apply min-h-screen bg-zinc-950 text-zinc-100;
  }

  .site-header {
    @apply bg-zinc-900 border-b border-zinc-800/50;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .site-main {
    margin-inline: auto;
    max-width: 1440px;
    padding-inline: 0.5rem;
    @apply lg:py-10 py-4;
  }

  .site-footer {
    padding-inline: 0.5rem;
    @apply border-t border-zinc-800 py-8 text-zinc-300;
  }

  @media (min-width: 64rem) {
    .site-main,
    .site-footer {
      padding-inline: 1rem;
    }
  }

  .main-navigation ul {
    @apply m-0 list-none p-0;
  }

  .main-navigation a {
    @apply px-3 py-2 text-sm font-normal leading-[1.3] uppercase text-zinc-200 hover:text-gold-500;
  }

  .menu-toggle {
    @apply rounded-md px-3 py-2 text-sm text-zinc-100;
  }

  .primary-menu {
    @apply m-0 list-none gap-1 p-0;
  }

  .primary-menu li {
    @apply m-0;
  }
 .primary-menu li.current_page_item a{@apply text-gold-500}


.primary-menu-mobile li {
    @apply py-1;
  }


.primary-menu-mobile a {
  @apply text-2xl font-medium uppercase text-zinc-200 hover:text-gold-500;
  }



  .search-panel {
    @apply bg-zinc-950/95;
  }

  .entry-title {
    @apply mb-5 text-3xl font-bold;
  }

  .entry-content {
    @apply text-zinc-200;
  }

  .entry-content > * + * {
    @apply mt-4;
  }

  .woocommerce ul.products {
    @apply mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  .woocommerce ul.products li.product {
    @apply m-0 rounded-xl border border-zinc-800 bg-zinc-900 p-4;
    width: auto;
    float: none;
  }

  .woocommerce ul.products li.product .price {
    @apply text-gold-300;
  }

  /* Strong WooCommerce overrides for shop/category product grids. */
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    display: grid !important;
    gap: 1.25rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
  }

  @media (min-width: 40rem) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 64rem) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 80rem) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  body.woocommerce ul.products li.product,
  body.woocommerce-page ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.woocommerce ul.products::before,
  body.woocommerce ul.products::after,
  body.woocommerce-page ul.products::before,
  body.woocommerce-page ul.products::after {
    content: none !important;
    display: none !important;
  }

  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    @apply rounded-md border-0 bg-gold-400 px-4 py-2 text-sm font-semibold text-zinc-950 hover:bg-gold-300;
  }

  .woocommerce table.shop_table {
    @apply border-zinc-700 bg-zinc-900 text-zinc-100;
  }

  .asb-prose {
    @apply prose prose-invert max-w-none;
  }

  .asb-prose :where(a) {
    @apply text-gold-300 no-underline hover:text-gold-200;
  }

  .woocommerce-error,
  .woocommerce .woocommerce-error,
  .woocommerce-notices-wrapper .woocommerce-error,
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.payment-required .wpcf7-response-output {
    @apply rounded-md border border-red-900/70 bg-red-900/25 px-3 py-2 text-xs leading-tight text-red-200;
  }

  .woocommerce-error li,
  .wpcf7-not-valid-tip {
    @apply text-xs leading-tight text-red-300;
  }

  .wpcf7 form .wpcf7-not-valid,
  .woocommerce form .form-row.woocommerce-invalid input.input-text,
  .woocommerce form .form-row.woocommerce-invalid textarea,
  .woocommerce form .form-row.woocommerce-invalid select {
    @apply border-red-800/70 ring-1 ring-red-800/50;
  }
}


.swiper-pagination-bullet-active {
  @apply bg-[#d4af37]!;
}

.swiper-arrow {
  @apply size-8! rounded-full bg-white flex justify-center items-center opacity-50 hover:opacity-100 ease-in-out duration-300;
}
.swiper-button-next{ @apply -right-full!}
.swiper-button-prev{ @apply -left-full!}
.swiper:hover .swiper-button-next{ @apply right-2!}
.swiper:hover .swiper-button-prev{ @apply left-2!}

.swiper-button-next:after, .swiper-button-prev:after {
  @apply text-lg! text-[#d4af37];
}

.quantity .qty{@apply bg-zinc-800/50 h-10 border border-zinc-800/50 px-2 w-16 rounded}
.woocommerce-cart .quantity .qty{@apply bg-zinc-800/50 h-6 border border-zinc-800/50 px-1 w-14 text-sm rounded}

.woocommerce-tab-content h2{@apply text-xl font-medium pb-2 text-zinc-100}
.woocommerce-tab-content h3{@apply text-base italic font-medium pb-1 text-zinc-300}
.woocommerce-tab-content .woocommerce-product-attributes,
.woocommerce-tab-content table{@apply w-full border-collapse border! border-zinc-800! mb-0! text-sm} 
.woocommerce-tab-content .woocommerce-product-attributes th,
.woocommerce-tab-content .woocommerce-product-attributes td,
.woocommerce-tab-content th, .woocommerce-tab-content td{@apply p-2! border-collapse border! border-zinc-800! text-left} 
.woocommerce-tab-content .woocommerce-product-attributes p{@apply p-0!}
.woocommerce-tab-content p{ @apply text-sm text-zinc-200 }
.woocommerce-Reviews .woocommerce-noreviews {@apply text-left text-zinc-500 italic}
.woocommerce .woocommerce-Reviews #review_form_wrapper #review_form .comment-respond { @apply pt-3}
.woocommerce .woocommerce-Reviews #review_form_wrapper #review_form .comment-respond .comment-reply-title{@apply text-sm}
.woocommerce .woocommerce-Reviews #review_form_wrapper #review_form .comment-respond .comment-notes{@apply text-xs pt-2 text-zinc-500 italic}
.woocommerce .woocommerce-Reviews #review_form_wrapper #review_form .comment-respond .comment-form-rating{@apply text-sm pt-2 pb-1 text-zinc-300}
.woocommerce p.stars a{@apply text-base text-gold-500}
.comment-form-author label, .comment-form-email label{  @apply block text-sm font-medium text-zinc-300 mb-1}
.comment-form-cookies-consent {@apply relative pl-6}
.comment-form-cookies-consent #wp-comment-cookies-consent{ @apply text-gold-500 absolute left-0 top-0.5 mr-1 size-4}
.woocommerce #review_form #respond .form-submit .submit {@apply bg-gold-500 hover:bg-gold-600 text-white py-2 rounded text-base font-semibold transition}

.woocommerce-cart .cart_totals { @apply pt-3 }
.woocommerce-cart .cart_totals h2{ @apply text-xl font-semibold mb-2}
.woocommerce-cart .cart_totals table {@apply w-full border-collapse border! border-zinc-800! mb-0! text-sm} 
.woocommerce-cart .cart_totals td {@apply p-2! border-collapse border! border-zinc-800!  }
.woocommerce-cart .cart_totals th + td {@apply text-right!}
.woocommerce-cart .cart_totals .order-total th + td {@apply text-red-500}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {@apply pb-0}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {@apply w-full bg-gold-500 hover:bg-gold-600 text-white py-2 rounded text-base font-semibold transition cursor-pointer mb-0}

.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=email], 
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=number], 
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=password], 
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=tel], 
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=text], 
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=url], 
.woocommerce-checkout .wc-block-components-text-input input[type=email], 
.woocommerce-checkout .wc-block-components-text-input input[type=number], 
.woocommerce-checkout .wc-block-components-text-input input[type=password], 
.woocommerce-checkout .wc-block-components-text-input input[type=tel], 
.woocommerce-checkout .wc-block-components-text-input input[type=text], 
.woocommerce-checkout .wc-block-components-text-input input[type=url], 
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select{@apply border-zinc-800/70 }
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{@apply p-3 px-4 bg-zinc-800/30 rounded h-fit border-none!}
.woocommerce-checkout .wc-block-components-totals-footer-item{@apply text-red-500}
.woocommerce-checkout .wc-block-components-checkout-place-order-button {@apply bg-gold-500 hover:bg-gold-600 hover:text-white text-white py-2 rounded text-base font-semibold transition cursor-pointer mb-0}

.woocommerce-form {@apply p-3 px-4 bg-zinc-800/30 rounded h-fit border-none!}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select{@apply border-zinc-800/70 }
.woocommerce .woocommerce-form .woocommerce-button{@apply bg-gold-500 hover:bg-gold-600 hover:text-white text-white py-2 rounded text-base font-semibold transition cursor-pointer mb-0}
.woocommerce .woocommerce-order p{ @apply pb-3}
.woocommerce .woocommerce-order .order_details li strong{ @apply pt-2}
.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-order-details__title{ @apply pb-2 font-semibold text-lg}
.woocommerce table.shop_table{@apply bg-transparent  border border-collapse border-zinc-800}
.woocommerce .woocommerce-order .woocommerce-order-details thead tr{@apply bg-zinc-800/50 dark:bg-black border border-zinc-800}
.woocommerce .woocommerce-order .woocommerce-order-details tbody tr{@apply bg-transparent even:bg-zinc-800/30 even:dark:bg-black/10 border border-zinc-800}
.woocommerce .woocommerce-order .woocommerce-order-details th, .woocommerce .woocommerce-order .woocommerce-order-details td{@apply p-2 border border-zinc-800 text-left}


.prose .woocommerce-Reviews h2{
  @apply mt-3 mb-1
}

.prose .woocommerce-Reviews .woocommerce-noreviews {
  @apply mb-1
}
.prose{
--tw-prose-headings: var(--color-zinc-50) !important;
    --tw-prose-bold: var(--color-zinc-50) !important;
    --tw-prose-links: var(--color-gold-300) !important;
}

.noUi-connect{
  @apply bg-gold-300!;
}

.contact-form-list li{
  @apply  relative pb-3
}
.contact-form-list li label{
  @apply sr-only
}
.contact-form-list li span{ @apply block;}
.contact-form-list input{@apply w-full bg-transparent border border-zinc-700 rounded px-3 py-2   }
.contact-form-list textarea{@apply w-full h-32 bg-transparent border border-zinc-700 rounded px-3 py-2   }
.contact-form-list .contact-submit{@apply shrink-0 inline-flex items-center justify-center rounded-md bg-gold-500 px-4 py-2 text-sm font-semibold text-white cursor-pointer hover:bg-gold-300 disabled:opacity-60 disabled:cursor-not-allowed transition}



/* =========================
   Comments Area Wrapper
========================= */

.comments-area {
  @apply mt-5 max-w-xl mx-auto
}

/* =========================
   Reply Title
========================= */

.comment-reply-title {
  @apply text-2xl md:text-3xl font-semibold text-zinc-200 mb-8 tracking-tight;
}

.comment-reply-title small a {
  @apply ml-2 text-sm font-medium text-zinc-500 hover:text-black transition-colors duration-200;
}

/* =========================
   Form Layout
========================= */

.comment-form {
  @apply space-y-6;
}

.comment-form p {
  @apply m-0;
}

/* =========================
   Labels
========================= */

.comment-form label {
  @apply mb-2 inline-block text-sm font-medium text-zinc-200;
}

.required {
  @apply text-red-500;
}

/* =========================
   Inputs & Textarea
========================= */
.comment-form p{ @apply mb-5}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  @apply w-full rounded-md border border-zinc-800 bg-zinc-900 px-5 py-3 text-zinc-800 outline-none transition-all duration-200;
}

.comment-form textarea {
  @apply min-h-[180px] resize-y;
}

/* Focus State */

.comment-form input:focus,
.comment-form textarea:focus {
  @apply border-zinc-400 bg-white ring-4 ring-zinc-200;
}

/* Placeholder */

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  @apply text-zinc-400;
}

/* =========================
   Notes Text
========================= */

.comment-notes,
.logged-in-as,
.required-field-message {
  @apply text-sm leading-relaxed text-zinc-500;
}

/* =========================
   Cookies Checkbox
========================= */

.comment-form-cookies-consent {
  @apply flex items-start gap-3 rounded-2xl bg-zinc-50 p-4 border border-zinc-200;
}

.comment-form-cookies-consent input[type="checkbox"] {
  @apply mt-1 h-4 w-4 rounded border-zinc-300 text-black focus:ring-black;
}

.comment-form-cookies-consent label {
  @apply mb-0 text-sm text-zinc-600 leading-relaxed;
}

/* =========================
   Submit Button
========================= */

.form-submit {
  @apply pt-2;
}

/* Final mode overrides kept outside @layer so they always win cascade. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f5f5f5;
  --color-zinc-200: #e5e5e5;
  --color-zinc-300: #d4d4d4;
  --color-zinc-400: #a3a3a3;
  --color-zinc-500: #737373;
  --color-zinc-700: #404040;
  --color-zinc-800: #262626;
  --color-zinc-900: #171717;
  --color-zinc-950: #0a0a0a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-zinc-50: #0a0a0a;
  --color-zinc-100: #171717;
  --color-zinc-200: #262626;
  --color-zinc-300: #404040;
  --color-zinc-400: #525252;
  --color-zinc-500: #737373;
  --color-zinc-700: #a3a3a3;
  --color-zinc-800: #d4d4d4;
  --color-zinc-900: #f5f5f5;
  --color-zinc-950: #fafafa;
}

.comment-form .submit {
  @apply shrink-0 inline-flex items-center justify-center rounded-md bg-gold-500 px-4 py-2 text-sm font-semibold text-white cursor-pointer hover:bg-gold-300 disabled:opacity-60 disabled:cursor-not-allowed transition w-full;
}

/* =========================
   Responsive Grid Layout
========================= */

@screen md {
  .comment-form-author,
  .comment-form-email {
    @apply inline-block w-[calc(50%-12px)];
  }

  .comment-form-author {
    @apply mr-6;
  }

  .comment-form-url {
    @apply w-full;
  }
}

/* =========================
   Existing Comments List
========================= */

.comment-list {
  @apply mt-14 space-y-6;
}

.comment-list .comment {
  @apply rounded-3xl border border-zinc-200 bg-zinc-50 p-6;
}

.comment-author {
  @apply flex items-center gap-4 mb-4;
}

.comment-author img {
  @apply rounded-full;
}

.comment-author .fn {
  @apply text-base font-semibold text-zinc-900 not-italic;
}

.comment-metadata {
  @apply text-sm text-zinc-500 mt-1;
}

.comment-content {
  @apply text-zinc-700 leading-7;
}

.reply a {
  @apply inline-flex mt-4 text-sm font-medium text-zinc-700 hover:text-black transition-colors duration-200;
}

/* =========================
   Nested Replies
========================= */

.comment-list .children {
  @apply mt-6 ml-6 space-y-6 border-l border-zinc-200 pl-6;
}

.comment-form-cookies-consent {
  @apply border-0 items-center p-0 pl-6 my-5!;
}
.comment-form-cookies-consent input[type="checkbox"] {
  @apply absolute left-4 mt-2 top-1/2 -translate-y-1/2;
}