@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap");

/*
  linchic — brand layer over the Bottle base theme.
  Visual system derived from the supplied reference template:
  warm cream / brown / terracotta palette, EB Garamond headings, Montserrat body,
  hard (0-radius) edges and uppercase letterspaced buttons.
  Palette itself is configured in theme.config.json color schemes.
*/

:root {
  --sort-title-font: "EB Garamond", "Times New Roman", Georgia, serif;
  --sort-body-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sort-title-font-weight: 400;
  --sort-body-weight: 400;
  --sort-title-line-height: 1.2;
  --sort-body-line-height: 1.6;
}

/* Uppercase, letterspaced buttons are a defining trait of the reference design. */
.button,
.shopline-element-buy-now {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Editorial serif headings: a touch of tracking so the type reads calm, not cramped. */
h1,
h2,
h3,
h4,
.title1,
.title2,
.title3,
.title4 {
  letter-spacing: 0.01em;
}

/* Announcement bar: quieter, letterspaced micro-type. */
.announcement-bar {
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ===================== Phase 2: Collection page ===================== */

/* Hero: editorial serif title, calmer bottom rhythm.
   The collection's own banner image is merchant data and may carry baked-in text
   that would duplicate the title, so it is hidden and the hero art is rendered by
   the theme instead. TODO(final): upload this art as the collection banner in the
   admin, then delete the two rules below. */
.block-main-collection-banner {
  margin-block-end: 40px;
  background-image: url("https://sc02.alicdn.com/kf/Aa5f41330b74b4ddc9176df92bf1644a4T.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.block-main-collection-banner img {
  display: none;
}

.block-main-collection-banner__inner > div {
  width: 100%;
  max-width: 760px;
  padding-inline: 20px;
  margin-inline: auto;
}

.block-main-collection-banner__inner h1,
.block-main-collection-banner__inner .title1 {
  font-family: var(--sort-title-font);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Collection body rhythm */
.main-collection {
  padding-block: 50px;
}

/* Product card: quiet brown typography, letterspaced titles (reference style) */
.block-product-card__title {
  margin-block-start: 12px;
  font-size: var(--body4-font-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgb(var(--color-text));
  text-transform: uppercase;
}

.block-product-card__price {
  margin-block-start: 4px;
  font-size: var(--body4-font-size);
  color: rgb(var(--color-text));
}

/* Facets: uppercase micro-type headings, matching the reference sidebar */
.facets-filtering summary,
.facets-filtering .facets__heading,
.facets-sorting {
  font-size: var(--body5-font-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Quick-add: warm chip instead of a hard black circle */
.block-product-card__quick-add {
  background-color: rgba(var(--color-button-background), 0.9);
}

.block-product-card__quick-add:hover {
  background-color: rgb(var(--color-button-background));
}

/* Discount tag inherits the brand tag colour */
.block-product-card__discount-tag {
  background-color: rgb(var(--color-tag-background));
}

/* Ensure product card primary image is always painted at full opacity */
.block-product-card__image-wrapper > .block-product-card__image:nth-of-type(1) {
  opacity: 1 !important;
}

/* ===================== Phase 3: Home page ===================== */

/* Hero slideshow.
   Theme image settings expect media uploaded to the theme, so in this build the hero
   art is supplied by CSS per slide and the empty-state placeholder is hidden.
   TODO(final): upload the hero art in the theme editor, then drop these rules. */
.slideshow__item .slideshow__image {
  background-color: #4a3a2a;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.slideshow__item .slideshow__image svg {
  display: none;
}

/* The image container is opaque in the base theme, which hides the hero art behind it.
   Scoped under .slideshow__item so it outranks the section stylesheet, which loads later. */
.slideshow__item .slideshow__image-container {
  background-color: transparent;
}

.slideshow__item:nth-child(1) .slideshow__image {
  background-image: url("https://sc02.alicdn.com/kf/Aa5f41330b74b4ddc9176df92bf1644a4T.png");
}

.slideshow__item:nth-child(2) .slideshow__image {
  background-image: url("https://sc02.alicdn.com/kf/A9568719dc9ba49a7b1ef81734cd2b812X.png");
}

/* Section rhythm on the home page */
.rich-text {
  padding-block: 80px;
}

/* ---- Home page content area.

   Same constraint as the hero: theme image settings need media uploaded to the theme,
   so the art for the editorial cards and the studio feature is supplied by CSS.
   Scoped one level up so these rules outrank the section stylesheets.
   TODO(final): upload the art in the theme editor, then drop the url() rules. */

.text-columns-with-image-section .text-columns-with-image__card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.text-columns-with-image-section .text-columns-with-image__card-image .empty-image-class {
  display: none;
}

/* Each card sits inside an un-classed wrapper div inside the card group, so the
   per-card targeting must use the wrapper's position, not the card's own. */
.text-columns-with-image-section
  .text-columns-with-image__card-group
  > div:nth-child(1)
  .text-columns-with-image__card-image {
  background-image: url("https://sc02.alicdn.com/kf/Abb8577559fbe4b1b97cd0cd6388ff4f0P.png");
}

.text-columns-with-image-section
  .text-columns-with-image__card-group
  > div:nth-child(2)
  .text-columns-with-image__card-image {
  background-image: url("https://sc02.alicdn.com/kf/A2b642e515e3f4570b0b60bbeee1f3499R.png");
}

.text-columns-with-image-section
  .text-columns-with-image__card-group
  > div:nth-child(3)
  .text-columns-with-image__card-image {
  background-image: url("https://sc02.alicdn.com/kf/A49ddfd9de50d42019edc20bc911934f61.png");
}

/* Editorial cards read as headings, not as italic captions */
.text-columns-with-image-section .text-columns-with-image__card-title {
  font-family: var(--sort-title-font);
  font-style: normal;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.text-columns-with-image-section .text-columns-with-image__card-text {
  color: rgb(var(--color-light-text));
  font-size: 15px;
  line-height: 1.7;
}

/* These editorial cards are copy-only; the base theme injects a default "Optional button". */
.text-columns-with-image-section .text-columns-with-image__card-link {
  display: none;
}

/* Studio feature image */
.image-with-text-section .image-with-text__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-image: url("https://sc02.alicdn.com/kf/Ad4c2223d13734d75968da80e5ecddba57.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.image-with-text-section .image-with-text__image .empty-image-class {
  display: none;
}

/* ===================== Shop by category tiles =====================
   Replace flat placeholder colour swatches with high-fidelity editorial still lifes.
   TODO(final): upload these to the collection records in the admin, then drop these rules. */

.block-collection-list > li .block-collection-card__image-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.45s cubic-bezier(0.2, 0, 0.2, 1);
}

.block-collection-list > li .block-collection-card:hover .block-collection-card__image-wrapper {
  transform: scale(1.025);
}

/* Hide the placeholder image rendered from the flat color collection.featured_image */
.block-collection-list > li .block-collection-card__image-wrapper img,
.block-collection-list > li .block-collection-card__image-wrapper svg {
  display: none;
}

/* Card 1: Tops (natural linen shirts) */
.block-collection-list > li:nth-child(1) .block-collection-card__image-wrapper {
  background-image: url("https://sc02.alicdn.com/kf/Ac92a6eeb061e4f19899af6cb08315b47j.png");
}

/* Card 2: Bottoms (washed linen wide-leg trousers) */
.block-collection-list > li:nth-child(2) .block-collection-card__image-wrapper {
  background-image: url("https://sc02.alicdn.com/kf/A379aa39019214774b405cb315cc7fd94K.png");
}

/* Card 3: Dresses (relaxed terracotta tiered dress) */
.block-collection-list > li:nth-child(3) .block-collection-card__image-wrapper {
  background-image: url("https://sc02.alicdn.com/kf/Aa5b628c419f14c6a981d26b7304428e9Z.png");
}

/* Card 4: Outerwear (espresso linen-wool blazer) */
.block-collection-list > li:nth-child(4) .block-collection-card__image-wrapper {
  background-image: url("https://sc02.alicdn.com/kf/A3a6517898ad8474dbc07d998d062c02bW.png");
}

/* Category tile title: calm, letterspaced editorial style */
.block-collection-card__title {
  font-family: var(--sort-title-font);
  font-size: 18px;
  font-weight: 500;
  color: rgb(var(--color-text));
  letter-spacing: 0.03em;
  margin-block-start: 12px;
  text-align: center;
}

/* ===================== Featured Product Spotlight ===================== */
.product-detail-container--featured-product {
  padding-block: 60px;
  background-color: rgba(var(--color-background));
}

.product-detail-container--featured-product .product-detail__title {
  font-family: var(--sort-title-font);
  font-size: 36px;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
  line-height: 1.25;
}

.product-detail-container--featured-product .product-detail__price {
  font-size: 20px;
  color: rgb(var(--color-text));
}

.product-detail-container--featured-product .product-detail__button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  height: 52px;
}

/* ===================== FAQ Accordion ===================== */
.faq-section {
  padding-block: 70px;
  background-color: rgba(var(--color-background));
}

.faq-section .block-heading {
  font-family: var(--sort-title-font);
  font-size: 34px;
  color: rgb(var(--color-text));
  letter-spacing: 0.01em;
  margin-block-end: 40px;
}

.faq-collapsible-group {
  max-width: 860px;
  margin-inline: auto;
  border-block-end: 1px solid rgba(var(--color-text), 0.12);
}

.faq-collapse-panel {
  border-block-start: 1px solid rgba(var(--color-text), 0.12);
}

.faq-collapse-panel summary {
  cursor: pointer;
  padding-block: 22px;
  transition: opacity 0.2s ease;
}

.faq-collapse-panel summary:hover {
  opacity: 0.85;
}

.faq-collapse-panel__title {
  font-family: var(--sort-title-font);
  font-size: 20px;
  font-weight: 500;
  color: rgb(var(--color-text));
  letter-spacing: 0.01em;
}

.faq-collapse-panel__content {
  color: rgb(var(--color-light-text));
  font-size: 15px;
  line-height: 1.8;
  padding-block-end: 24px;
}

.faq-collapse-panel__fold svg {
  fill: rgb(var(--color-text));
  stroke: rgb(var(--color-text));
}

/* ===================== Product Detail Page (PDP) ===================== */

/* Product title in editorial serif */
.product-detail__title {
  font-family: var(--sort-title-font);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
  line-height: 1.25;
  margin-block-end: 10px;
}

@media (max-width: 959px) {
  .product-detail__title {
    font-size: 28px;
  }
}

/* Price presentation */
.product-detail__price {
  font-size: 22px;
  color: rgb(var(--color-text));
  margin-block-end: 20px;
}

/* Variant picker swatches / options */
.product-detail__variant-picker .variant-picker__group-label {
  font-family: var(--sort-body-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--color-text));
  margin-block-end: 10px;
}

.variant-picker__button {
  border-radius: 0;
  border-color: rgba(var(--color-text), 0.25);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.variant-picker__button:hover {
  border-color: rgb(var(--color-text));
}

/* Buy buttons: high-end slow fashion style */
.product-detail__buy-buttons .button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  min-height: 52px;
  font-size: 14px;
}

/* Trust / Sell Info badge banner */
.product-detail__sell-info {
  background-color: rgba(var(--color-button-background), 0.04);
  padding: 16px 20px;
  border-radius: 0;
  border: 1px solid rgba(var(--color-text), 0.08);
  margin-block: 22px;
}

.product-detail__sell-info .sell-info__text {
  font-size: 14px;
  color: rgb(var(--color-text));
  letter-spacing: 0.02em;
}

.product-detail__sell-info .sell-info__icon svg {
  fill: rgb(var(--color-button-background));
  stroke: rgb(var(--color-button-background));
}

/* Accordions (Fabric & Care, Shipping, Sustainability) */
.product-detail__additional {
  border-block-start: 1px solid rgba(var(--color-text), 0.12);
  display: block;
}

.product-detail__additional:last-of-type {
  border-block-end: 1px solid rgba(var(--color-text), 0.12);
}

.product-detail__additional .additional__trigger {
  padding-block: 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.2s ease;
}

.product-detail__additional .additional__trigger:hover {
  opacity: 0.85;
}

.product-detail__additional .additional__title {
  font-family: var(--sort-title-font);
  font-size: 19px;
  font-weight: 500;
  color: rgb(var(--color-text));
  letter-spacing: 0.01em;
}

.product-detail__additional .additional__content {
  color: rgb(var(--color-light-text));
  font-size: 15px;
  line-height: 1.8;
  padding-block-end: 20px;
}

.product-detail__additional .additional__arrow svg {
  fill: rgb(var(--color-text));
  stroke: rgb(var(--color-text));
  transition: transform 0.3s ease;
}

.product-detail__additional details[open] .additional__arrow svg {
  transform: rotate(180deg);
}

/* Recommended Products section heading */
.recommended-product .block-heading {
  font-family: var(--sort-title-font);
  font-size: 32px;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
  margin-block-end: 30px;
}

/* ===================== Cart Drawer (Slide-out) ===================== */

/* Drawer body geometry and shadow */
.cart-drawer__body {
  width: 460px;
  background-color: rgb(var(--color-background));
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12);
}

@media (max-width: 959px) {
  .cart-drawer__body {
    width: 92%;
  }
}

/* Drawer header */
.cart-drawer__header {
  padding: 22px 24px;
  background-color: rgb(var(--color-background));
  border-block-end: 1px solid rgba(var(--color-text), 0.1);
}

.cart-drawer__header .title4 {
  font-family: var(--sort-title-font);
  font-size: 24px;
  font-weight: 500;
  color: rgb(var(--color-text));
  letter-spacing: 0.02em;
}

.cart-drawer__close {
  inset-block-start: 22px;
  inset-inline-end: 20px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.cart-drawer__close:hover {
  transform: rotate(90deg);
  opacity: 0.75;
}

/* Free Shipping threshold progress banner */
.cart-drawer__shipping-banner {
  padding: 14px 24px 16px;
  background-color: rgba(var(--color-button-background), 0.05);
  border-block-end: 1px solid rgba(var(--color-text), 0.08);
}

.shipping-banner__text {
  font-size: 13.5px;
  color: rgb(var(--color-text));
  letter-spacing: 0.02em;
  text-align: center;
  margin-block-end: 8px;
}

.shipping-banner__text--success {
  color: #2e6b47;
  font-weight: 500;
}

.shipping-banner__bar {
  width: 100%;
  height: 4px;
  background-color: rgba(var(--color-text), 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.shipping-banner__progress {
  height: 100%;
  background-color: rgb(var(--color-button-background));
  transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  border-radius: 2px;
}

/* Cart Item row */
.cart-drawer .cart-item {
  padding-block: 18px;
  border-block-end: 1px solid rgba(var(--color-text), 0.08);
}

.cart-drawer .cart-item:last-of-type {
  border-block-end: none;
}

.cart-item__title {
  font-family: var(--sort-title-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
}

.cart-item__spec {
  color: rgb(var(--color-light-text));
  font-size: 13px;
  margin-block-start: 4px;
}

/* Checkout footer block */
.cart-fixed-checkout {
  border-block-start: 1px solid rgba(var(--color-text), 0.1);
  padding: 20px 24px 24px;
  background-color: rgb(var(--color-background));
}

.cart-fixed-checkout__total-text {
  font-family: var(--sort-body-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--color-text));
}

.cart-fixed-checkout__total-price {
  font-family: var(--sort-body-font);
  font-size: 20px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.cart-fixed-checkout .button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  min-height: 52px;
  font-size: 14px;
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text));
  width: 100%;
  transition: opacity 0.25s ease;
}

.cart-fixed-checkout .button:hover {
  opacity: 0.9;
}

/* Empty cart state */
.cart-empty {
  padding-block: 80px 40px;
  text-align: center;
}

.cart-empty__tips {
  font-family: var(--sort-title-font);
  font-size: 22px;
  color: rgb(var(--color-text));
  margin-block-end: 24px;
}

.cart-empty__button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  min-height: 48px;
  padding-inline: 32px;
  font-size: 13.5px;
}

/* ===================== About Us / Our Story Page ===================== */

/* About Hero styling */
.image-banner-section .image-banner__content {
  background-color: transparent;
}

/* Philosophy rich-text narrow container */
#about-philosophy .rich-text-section,
[data-section-id="about-philosophy"] .rich-text-section {
  max-width: 860px;
  margin-inline: auto;
}

#about-philosophy .rich-text__text p,
[data-section-id="about-philosophy"] .rich-text__text p {
  font-size: 16px;
  line-height: 1.9;
  color: rgb(var(--color-light-text));
  margin-block-end: 18px;
}

/* About Quote banner */
#about-quote .rich-text__heading,
[data-section-id="about-quote"] .rich-text__heading {
  font-family: var(--sort-title-font);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: rgb(var(--color-text));
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 959px) {
  #about-quote .rich-text__heading,
  [data-section-id="about-quote"] .rich-text__heading {
    font-size: 22px;
  }
}

#about-quote .rich-text__text p,
[data-section-id="about-quote"] .rich-text__text p {
  font-family: var(--sort-body-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--color-light-text));
  margin-block-start: 16px;
}

/* ===================== Contact Us Page ===================== */

.contact-form__inner {
  max-width: 760px;
  margin-inline: auto;
}

.contact-form__title {
  font-family: var(--sort-title-font);
  font-size: 32px;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
  text-align: center;
  margin-block-end: 28px;
}

.contact-form .field__input {
  border-radius: 0;
  border-color: rgba(var(--color-text), 0.2);
  background-color: transparent;
  font-size: 14.5px;
  transition: border-color 0.2s ease;
}

.contact-form .field__input:focus {
  border-color: rgb(var(--color-text));
}

.contact-form__button .button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  min-height: 52px;
  font-size: 14px;
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text));
  width: 100%;
}

/* ===================== Order Tracking Page ===================== */

.main-order-tracking__wrapper {
  max-width: 580px;
  margin-inline: auto;
  padding-block: 20px 40px;
}

.main-order-tracking__title {
  font-family: var(--sort-title-font);
  font-size: 36px;
  letter-spacing: 0.01em;
  color: rgb(var(--color-text));
  margin-block-end: 24px;
}

.main-order-tracking__tabs span {
  font-family: var(--sort-body-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-block-end: 8px;
  color: rgb(var(--color-light-text));
  cursor: pointer;
}

.main-order-tracking__tabs span.active {
  color: rgb(var(--color-text));
  border-block-end: 2px solid rgb(var(--color-text));
  font-weight: 600;
}

.main-order-tracking__submit {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 0;
  min-height: 52px;
  font-size: 14px;
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text));
  width: 100%;
  margin-block-start: 20px;
}