/* ==========================================================================
   Ananta Designs - WooCommerce

   Loaded only on WooCommerce screens (see inc/assets.php). Woo's own three
   stylesheets are dequeued, so nothing here is fighting an existing rule - these are the complete storefront styles rather than a set of overrides.
   ========================================================================== */

/* ---- department tabs -----------------------------------------------------
   Serif, square, and a hairline grid: clothing and jewellery are halves of
   the shop, not entries in a list. */

.dept-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.dept-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding-inline: 0.75rem;
  background: var(--ink);
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

@media (min-width: 768px) {
  .dept-tab {
    font-size: 17px;
  }
}

.dept-tab:hover {
  background: var(--surface);
  color: var(--fg);
}

.dept-tab.is-active {
  background: var(--surface);
  color: var(--gold);
}

/* ---- the sticky control bar ---------------------------------------------- */

.shop-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  border-block: 1px solid var(--line);
  background: rgba(8, 8, 10, 0.95);
  backdrop-filter: blur(12px);
}

.shop-bar__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
}

.shop-bar__count {
  font-size: 13px;
  color: var(--muted);
}

.shop-bar__sort {
  margin-left: auto;
}

.shop-bar__sort select,
.woocommerce-ordering select {
  min-height: 40px;
  padding-inline: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--fg-dim);
  font-size: 13px;
  transition: border-color 0.3s var(--ease-soft);
}

.shop-bar__sort select:hover,
.shop-bar__sort select:focus {
  border-color: var(--gold);
  outline: none;
}

/* ---- the product grid ----------------------------------------------------
   Two across a phone, opening to five with room. Two-up is deliberate: a
   single column makes a catalogue feel thin, and the card is legible at half
   a phone's width. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---- the product card ---------------------------------------------------- */

.product-card {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.product-card__media {
  display: block;
  position: relative;
}

.product-card__media .plate {
  transition: transform 0.5s var(--ease-soft);
}

.product-card:hover .plate__img {
  transform: scale(1.04);
}

.plate__img {
  transition: transform 0.5s var(--ease-soft);
}

.product-card__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  pointer-events: none;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
}

@media (min-width: 768px) {
  .product-card__body {
    padding: 1rem;
  }
}

.product-card__cat {
  letter-spacing: 0.16em;
  font-size: 10px;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--fg);
}

@media (min-width: 768px) {
  .product-card__title {
    font-size: 18px;
  }
}

.product-card__title a {
  transition: color 0.3s var(--ease-soft);
}

.product-card__title a:hover {
  color: var(--gold);
}

.product-card__price {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 15px;
  color: var(--fg);
}

.product-card__price del {
  color: var(--muted);
  font-size: 0.85em;
  margin-right: 0.375rem;
}

.product-card__price ins {
  text-decoration: none;
}

/* "Price on request", which stands in wherever no price has been set.

   Set apart from a real figure on purpose: smaller, letter-spaced, muted.
   A shopper scanning a grid should be able to tell at a glance that this is
   a note rather than a number, and never mistake it for one. */
.price-ask {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- single product ------------------------------------------------------ */

.product-hero {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .product-hero {
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--head-h) + 1rem);
  }
}

.product-gallery__frame {
  overflow: hidden;
  border: 1px solid var(--line);
}

.product-gallery__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.product-gallery__thumbs button {
  width: 72px;
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease-soft);
}

.product-gallery__thumbs button[aria-selected="true"] {
  border-color: var(--gold);
}

.product-summary__cat {
  letter-spacing: 0.16em;
}

.product-summary__title {
  margin-top: 0.75rem;
}

.product-summary__excerpt {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-dim);
}

.product-summary__price {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 24px;
  color: var(--fg);
}

/* The panel shown in place of a buy box while the shop is a showcase.
   States plainly that ordering is not open rather than presenting a button
   that cannot work. */
.product-enquiry {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(195, 161, 106, 0.35);
}

.product-enquiry__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--fg);
}

.product-enquiry__body {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
}

.product-enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

/* ---- assurances on the product page -------------------------------------- */

.product-assurances {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .product-assurances {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-assurances li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-dim);
}

.product-assurances svg {
  flex-shrink: 0;
  color: var(--gold);
  width: 16px;
  height: 16px;
}

/* ---- WooCommerce messages ------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--surface);
  font-size: 14px;
  color: var(--fg-dim);
  list-style: none;
}

.woocommerce-error {
  border-left-color: #b4483f;
}

/* ---- breadcrumb ---------------------------------------------------------- */

.ananta-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-top: calc(var(--head-h) + 1rem);
  padding-bottom: 1rem;
  font-size: 12px;
  color: var(--muted);
}

.ananta-breadcrumb a {
  transition: color 0.3s var(--ease-soft);
}

.ananta-breadcrumb a:hover {
  color: var(--gold);
}

/* ---- related products ---------------------------------------------------- */

.related-products {
  padding-bottom: 3rem;
}

.related-products .product-grid {
  margin-top: 1.25rem;
}

/* ==========================================================================
   Account and bag
   ==========================================================================

   Both pages render inside `.entry-content.prose`, which underlines links,
   bullets list items and spaces every sibling - right for a policy page,
   wrong for a form and a card grid. `.wc-page` undoes exactly that much and
   nothing else, so the prose rules keep working everywhere else. */

/* The prose measure is ~643px, which is right for a policy page and far too
   narrow for a two-column account screen or a four-up product rail. These
   two pages get the full shell instead. */
body.woocommerce-account .entry-content.prose,
body.woocommerce-cart .entry-content.prose {
  max-width: none;
}

.wc-page > * + * {
  margin-top: 2rem;
}

.entry-content .wc-page ul {
  padding-left: 0;
  list-style: none;
}

/* The prose bullet is a `::before` plus 1rem of left padding on the item.
   Both have to go - but this selector also outranks any padding a card-shaped
   list item sets for itself, which is what pushed the benefit cards' icons
   and text outside their own borders. Card items re-assert their padding
   below at a specificity that wins. */
.entry-content .wc-page ul > li {
  padding-left: 0;
}

.entry-content .wc-page ul > li.account-benefit {
  padding: 1.125rem;
}

.entry-content .wc-page ul > li::before {
  content: none;
}

/* `.entry-content a` sets colour as well as underline, and it outranks the
   button's own colour - which put gold text on a gold button and made the
   primary action read as an empty rectangle. Each tone is re-asserted at a
   specificity that wins. */
.entry-content .wc-page a.btn {
  text-decoration: none;
}

.entry-content .wc-page a.btn--gold {
  color: #100c04;
}

.entry-content .wc-page a.btn--outline,
.entry-content .wc-page a.btn--ghost {
  color: var(--fg);
}

.entry-content .wc-page a.btn--outline:hover,
.entry-content .wc-page a.btn--ghost:hover {
  color: var(--gold);
}

.entry-content .wc-page p {
  color: inherit;
}

/* ---- the bag ------------------------------------------------------------- */

.bag-empty {
  padding: 4rem 1.5rem;
  text-align: center;
}

.bag-empty__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.2;
  color: var(--fg);
}

.bag-empty__body {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.bag-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

.bag-suggest__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 400;
  color: var(--fg);
}

.bag-page .product-grid {
  margin-top: 1.25rem;
}

/* ---- the account screen -------------------------------------------------- */

.account-page {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .account-page {
    /* The form is the narrower column: it is a short form, and the reasons
       for filling it in deserve the wider half. */
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.account-page__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg);
}

.account-page__intro .note-rule {
  margin-top: 1.25rem;
}

.account-benefits {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 560px) {
  .account-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

.account-benefit svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.account-benefit__title {
  margin-top: 0.75rem;
  font-size: 14px;
  color: var(--fg);
}

.account-benefit__body {
  margin-top: 0.375rem;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.account-page__forms {
  display: grid;
  gap: 1rem;
}

.account-card {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .account-card {
    padding: 1.75rem;
  }
}

.account-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--fg);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* WooCommerce's own field classes, mapped onto the theme's input. The
   template uses `.field` for layout, but the inputs keep their
   `woocommerce-Input` names so Woo's validation and autofill still find
   them - which means the theme has to style both. */
.account-form .woocommerce-Input,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.3s var(--ease-soft);
}

.account-form input:focus {
  outline: none;
  border-color: var(--gold);
}

.account-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.account-form .field__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-form .required {
  color: var(--gold);
  text-decoration: none;
}

.account-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--fg-dim);
  cursor: pointer;
}

.checkline input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

.entry-content .wc-page .account-form__link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s var(--ease-soft);
}

.entry-content .wc-page .account-form__link:hover {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-aside {
  padding: 1.25rem;
}

.account-aside__title {
  font-size: 14px;
  color: var(--fg);
}

.account-aside__body {
  margin-top: 0.375rem;
  margin-bottom: 1rem;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* WooCommerce's own notices (bad password, logged out, and so on). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  list-style: none;
  font-size: 14px;
  color: var(--fg-dim);
}

.entry-content .woocommerce-error li,
.entry-content .woocommerce-message li,
.entry-content .woocommerce-info li {
  padding-left: 0;
}

.entry-content .woocommerce-error li::before,
.entry-content .woocommerce-message li::before,
.entry-content .woocommerce-info li::before {
  content: none;
}

/* ---- the rest of the account area ----------------------------------------
   Lost password, reset password, edit account, addresses, orders. Each is a
   WooCommerce template with its own markup, and overriding six of them to
   restyle the same three controls would be six files to keep in step with
   WooCommerce. These rules dress Woo's own classes instead, scoped to the
   account pages so nothing else is touched. */

body.woocommerce-account .entry-content .woocommerce-Input,
body.woocommerce-account .entry-content input[type="text"],
body.woocommerce-account .entry-content input[type="email"],
body.woocommerce-account .entry-content input[type="tel"],
body.woocommerce-account .entry-content input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.3s var(--ease-soft);
}

body.woocommerce-account .entry-content input:focus {
  outline: none;
  border-color: var(--gold);
}

body.woocommerce-account .entry-content .woocommerce-form-row,
body.woocommerce-account .entry-content .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 26rem;
}

body.woocommerce-account .entry-content .woocommerce-form-row label,
body.woocommerce-account .entry-content .form-row > label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

body.woocommerce-account .entry-content .required {
  color: var(--gold);
  text-decoration: none;
}

/* Woo's own submit buttons, given the theme's gold button. */
body.woocommerce-account .entry-content .woocommerce-Button,
body.woocommerce-account .entry-content button.button,
body.woocommerce-account .entry-content a.button,
body.woocommerce-account .entry-content input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--gold);
  color: #100c04;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-soft);
}

body.woocommerce-account .entry-content .woocommerce-Button:hover,
body.woocommerce-account .entry-content button.button:hover,
body.woocommerce-account .entry-content a.button:hover {
  background: var(--gold-soft);
}

/* The dashboard once someone is signed in. */
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.entry-content .woocommerce-MyAccount-navigation li {
  padding-left: 0;
}

.entry-content .woocommerce-MyAccount-navigation li::before {
  content: none;
}

.entry-content .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition:
    border-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

.entry-content .woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  border-color: var(--gold);
  color: var(--gold);
}

.woocommerce-MyAccount-content {
  margin-top: 2rem;
}