/** Shopify CDN: Minification failed

Line 4926:51 Unterminated string token
Line 4931:13 Unterminated string token
Line 5409:11 Expected identifier but found whitespace
Line 5409:12 Unexpected "linear-gradient("
Line 5791:0 Unexpected "}"
Line 7082:2 Expected ":"
Line 7083:2 Expected ":"
Line 7084:2 Expected ":"
Line 7085:2 Expected ":"
Line 7086:2 Expected ":"
... and 53 more hidden warnings

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover {
  background-color: var(--color-input-hover-background);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.resource-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  will-change: transform, box-shadow;
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .resource-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), calc(100% - (var(--page-margin) * 2)))) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  background-color: var(--color-background);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

placeholder-image {
  display: block;
  height: 100%;
  aspect-ratio: var(--ratio);
}

placeholder-image[data-type='product'] {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  width: 100%;
}

/** Placeholder background for the placeholder image, the dimensions are the same as the product images */
placeholder-image[data-type='product']:not(:has(> img)) {
  aspect-ratio: var(--ratio);
  height: 350px;
}

placeholder-image > img {
  object-fit: cover;
  aspect-ratio: var(--ratio);
  height: 100%;
}

[data-placeholder='true'] * {
  cursor: default;
}

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > * {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > * {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, var(--font-h1-color));
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > * {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, var(--font-h2-color));
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > * {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, var(--font-h3-color));
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > * {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, var(--font-h4-color));
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > * {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color, var(--font-h5-color));
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > * {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color, var(--font-h6-color));
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)),
.rte
  :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6)
  a:where(:not(.button, .button-primary, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-sticky) - 1);
}

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: slideInRight;
  --dialog-drawer-closing-animation: slideOutRight;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer.dialog-closing {
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

.show-more__button .svg-wrapper {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: var(--color-primary-hover);
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  /* width and overflow forces children to shrink to parent width */
  --slide-width: round(up, 100%, 1px);

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 2);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
  }
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / calc(var(--media-preview-ratio)) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  @supports not selector(:focus-visible) {
    &:has(:focus) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }
}

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentcolor;
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + calc(var(--scaling-factor) * var(--offset-swatch-width) * 1px)),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + calc(var(--scaling-factor) * var(--offset-swatch-height) * 1px)),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

@media screen and (min-width: 750px) {
  product-card:focus-within .quick-add__button,
  .card-gallery:hover .quick-add__button {
    display: grid;
    will-change: margin, opacity;
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
  }
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }
  }
}

@media (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) clamp(1rem, 1em * 0.25, 2rem);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

.checkbox {
  --checkbox-size: 22px;
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-border-radius: 7px;
  --checkbox-label-padding: 8px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

  position: relative;
  display: flex;
  align-items: center;

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &:has(.checkbox__input:disabled) {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    background-color: var(--color-input-hover-background);
  }
}

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

  color: var(--color-foreground);
}

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  position: fixed;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: calc(infinity);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
  transition: opacity 0.3s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-foreground);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1));
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(var(--custom-transform-from, 100%));
  }

  to {
    transform: translateX(var(--custom-transform-to, 0));
  }
}

@keyframes slideInLeftViewTransition {
  from {
    transform: translateX(100px);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--custom-transform-to, -100%));
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes cartBubbleSlideIn {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  &[size='small'] {
    min-height: 17.5rem;
  }

  &[size='medium'] {
    min-height: 21.25rem;
  }

  &[size='large'] {
    min-height: 25rem;
  }

  @media screen and (min-width: 750px) {
    &[size='small'] {
      min-height: 26.25rem;
    }

    &[size='medium'] {
      min-height: 35rem;
    }

    &[size='large'] {
      min-height: 45rem;
    }
  }
}

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: start;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
}

/*
 * Slideshow Controls
 */
slideshow-controls {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  scrollbar-width: none;
  min-height: var(--minimum-touch-target);
  grid-area: controls;

  &[controls-on-media] {
    position: absolute;
    bottom: 0;
  }
}

slideshow-controls::-webkit-scrollbar {
  display: none;
}

slideshow-controls button {
  --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  --color-active: var(--color-foreground);
  --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

  display: inline-block;
  height: var(--minimum-touch-target);
  width: var(--minimum-touch-target);
  cursor: pointer;
}

slideshow-controls .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-xs);
}

slideshow-controls[pagination-position='center'] {
  align-items: center;
  justify-content: center;
}

slideshow-controls[pagination-position='center'][thumbnails] {
  width: 100%;
}

slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
  justify-content: space-between;
}

slideshow-component:has(slideshow-controls[thumbnails]) {
  &:has(slideshow-controls[pagination-position='right']) {
    display: grid;
    grid-template:
      'container controls' auto
      'arrows controls' min-content
      / 1fr auto;
  }

  &:has(slideshow-controls[pagination-position='left']) {
    display: grid;
    grid-template:
      'controls container' auto
      'controls arrows' min-content
      / auto 1fr;
  }

  slideshow-controls[pagination-position='left'] {
    order: -1;
  }
}

slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;

  .slideshow-controls__thumbnails-container {
    overflow: hidden auto;
  }

  &:not([controls-on-media]) {
    .slideshow-controls__thumbnails-container {
      position: sticky;
      top: var(--sticky-header-offset, 0);
    }

    .slideshow-controls__thumbnails {
      padding-block-start: var(--focus-outline-offset);
    }
  }
}

slideshow-controls:not([controls-on-media])[icons-on-media] {
  &[pagination-position='right'] {
    justify-content: flex-end;
  }

  &[pagination-position='left'] {
    justify-content: flex-start;
  }
}

slideshow-controls:not([controls-on-media]):is([pagination-position='left'], [pagination-position='right'])
  .slideshow-controls__thumbnails {
  padding-block: var(--padding-2xs);
}

slideshow-controls:not([controls-on-media]) {
  &:is([pagination-position='right']) {
    .slideshow-controls__thumbnails {
      padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }

  &:is([pagination-position='left']) {
    .slideshow-controls__thumbnails {
      padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }
}

slideshow-controls[controls-on-media] {
  z-index: var(--layer-raised);

  &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
    --color-foreground: #fff;
    --color-foreground-rgb: var(--color-white-rgb);
  }

  &[pagination-position='right'] {
    right: 0;
  }

  &[pagination-position='left'] {
    left: 0;
  }

  &[pagination-position='center'] {
    width: 100%;
  }

  &:not([thumbnails])[pagination-position='left'] {
    width: fit-content;
    align-self: flex-start;
  }

  &:not([thumbnails])[pagination-position='right'] {
    width: fit-content;
    align-self: flex-end;
  }
}

slideshow-controls:is([pagination-position='right'], [pagination-position='left']) {
  .slideshow-controls__thumbnails {
    flex-direction: column;
  }
}

.slideshow-controls__arrows {
  display: flex;
  justify-content: space-between;
  height: var(--minimum-touch-target);
  grid-area: arrows;

  button {
    padding: 0 var(--padding-xs);
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  list-style: none;

  button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }
}

slideshow-controls:has(.slideshow-controls__dots),
slideshow-component[autoplay] slideshow-controls {
  mix-blend-mode: difference;
}

.slideshow-controls__dots {
  gap: 0.6rem;
  padding: var(--padding-sm) var(--padding-lg);
  border-radius: 3rem;
  overflow: hidden;

  button {
    --size: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    margin: calc(var(--size) / -2);
    font-size: 0;
    border-radius: calc(var(--size));

    &::after {
      content: '';
      display: block;
      background-color: var(--color);
      height: var(--size);
      width: var(--size);

      /* This is at --size / 2 to remove a visual regression on subpixel rendering displays */
      border-radius: calc(var(--size) / 2);

      @supports not (view-timeline-axis: inline) {
        &[aria-selected='true'] {
          --color: var(--color-active);
        }
      }

      &:hover {
        --color: var(--color-hover);
      }
    }

    &[aria-selected='true'] {
      --color: var(--color-active);
    }
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  &:only-child {
    margin-inline: auto;
  }
}

.slideshow-controls__counter {
  color: var(--color-foreground);
  background-color: rgb(0 0 0 / 40%);
  width: auto;
  border-radius: 2rem;
  padding: 0.3rem var(--padding-sm);
  margin-inline: var(--margin-sm);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size--xs);

  .slash {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    padding-inline: var(--padding-2xs);
    margin-block-start: -0.1rem;
  }
}

.slideshow-control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.slideshow-control--large {
  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .svg-wrapper,
  svg {
    width: var(--slideshow-controls-icon);
    height: var(--slideshow-controls-icon);
  }
}

/* Slideshow control shape styles */
.button-unstyled.slideshow-control.slideshow-control--shape-square,
.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
}

.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  border-radius: 50%;
}

.button-unstyled.slideshow-control.slideshow-control--shape-square {
  border-radius: 0;
}

.slideshow-control .icon-caret {
  rotate: -90deg;
}

/* Slideshow Thumbnails */
.slideshow-controls__thumbnails-container {
  display: flex;
  width: 100%;
  max-height: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
}

.slideshow-controls__thumbnails {
  display: inline-flex;
  padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
  padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
  gap: var(--gap-xs);
  margin-inline: auto;
  height: fit-content;

  .slideshow-control {
    border-radius: var(--media-radius);
    width: clamp(44px, 7vw, var(--thumbnail-width));
    height: auto;
    aspect-ratio: var(--aspect-ratio);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
    }
  }
}

.slideshow-controls__thumbnail {
  position: relative;
}

.slideshow-controls__thumbnail-badge {
  position: absolute;
  top: var(--padding-2xs);
  right: var(--padding-2xs);
  width: clamp(16px, 10%, 20px);
  height: clamp(16px, 10%, 20px);
  background-color: var(--color-background);
  border-radius: var(--style-border-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

.slideshow-controls__thumbnail-badge svg {
  width: 60%;
  height: 60%;
  fill: var(--color-foreground);
  opacity: 0.6;
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  opacity: 1;
}

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.block-resource-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  container-name: resource-list;
}

.section-resource-list {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

.section-resource-list.section--full-width product-card-link > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

.resource-list--carousel-mobile {
  display: block;

  @media screen and (min-width: 750px) {
    display: none;
  }
}

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.resource-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}
/* ──────────────────────────────── */
/* GRAIPHICS PREMIUM CTA STİLLERİ  */
/* Horizon Theme Compatible        */
/* ──────────────────────────────── */

/* Tüm butonların temel görünüşünü düzenle */
button,
.button,
.shopify-payment-button__button--unbranded,
.product-form__submit,
.product__actions .button {
    border-radius: 999px !important;
    transition: all .22s ease !important;
}

/* “Sepete Ekle” siyah butonlar */
.product-form__submit,
.product__actions .button--primary,
.product__actions .button {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,184,0,0.6) !important;
}

/* Hover efekti – premium glow */
.product-form__submit:hover,
.product__actions .button--primary:hover,
.product__actions .button:hover {
    transform: scale(1.035) !important;
    box-shadow: 0 0 18px rgba(255,184,0,0.35) !important;
}

/* “Hemen Satın Al” butonu — marka rengiyle öne çıkar */
.shopify-payment-button__button--unbranded {
    background-color: #FFB800 !important;
    color: #111111 !important;
    border: none !important;
}

.shopify-payment-button__button--unbranded:hover {
    filter: brightness(1.06);
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 0 18px rgba(255,184,0,0.45) !important;
}

/* Disabled durumları (stok yoksa vs.) bozulmasın */
button:disabled,
.button:disabled {
    opacity: .45 !important;
    transform: none !important;
    box-shadow: none !important;
}
/* ────────────────────────────────────────── */
/* GRAIPHICS – APPLE STYLE CTA BUTTONS       */
/* Horizon theme compatible                  */
/* ────────────────────────────────────────── */

:root {
  --grai-gold: #FFB800;
  --grai-black: #111111;
}

/* GENEL BUTON RESET – hepsini oval ve smooth yap */
button,
.button,
.shopify-payment-button__button--unbranded,
.product-form__submit,
.product__actions .button {
  border-radius: 999px !important;
  transition: all 0.22s ease !important;
  font-weight: 600;
}

/* 1) SİYAH “SEPETE EKLE” TARZI BUTONLAR  */
.product-form__submit,
.product__actions .button--primary,
.product__actions .button {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 184, 0, 0.55) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

/* Apple tarzı hafif highlight */
.product-form__submit::before,
.product__actions .button--primary::before,
.product__actions .button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 0,
      rgba(255, 255, 255, 0.16) 0,
      transparent 45%);
  opacity: 0.9;
  pointer-events: none;
}

/* Hover – hafif büyüme ve gold glow */
.product-form__submit:hover,
.product__actions .button--primary:hover,
.product__actions .button:hover {
  transform: scale(1.035) translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.45);
}

/* “Sepete Ekle” ikonlu versiyon – metni içeren buton */
.product-form__submit span,
.product__actions .button span {
  position: relative;
  padding-left: 1.6em;
}

/* Emoji ikon – dokunmadan Apple hissi */
.product-form__submit span::before,
.product__actions .button span::before {
  content: "🛒";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.05em;
}

/* 2) “HEMEN SATIN AL” – GOLD GRADIENT 3D CTA  */
.shopify-payment-button__button--unbranded {
  background: linear-gradient(135deg, #FFD95A, #FFB800) !important;
  color: #111111 !important;
  border: 0 !important;
  box-shadow:
    0 10px 24px rgba(255, 184, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

/* İç highlight */
.shopify-payment-button__button--unbranded::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 55%
  );
  pointer-events: none;
}

/* “Hemen Satın Al” ikon ekle (⚡) */
.shopify-payment-button__button--unbranded span {
  position: relative;
  padding-left: 1.6em;
}

.shopify-payment-button__button--unbranded span::before {
  content: "⚡";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.05em;
}

/* Hover – biraz daha 3D hissi */
.shopify-payment-button__button--unbranded:hover {
  transform: scale(1.04) translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 12px 28px rgba(255, 184, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Disabled durumları bozulmasın */
button:disabled,
.button:disabled,
.shopify-payment-button__button--unbranded:disabled {
  opacity: 0.45 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 3) HEADER BUTONLARINA AYNI DİLİ TAŞI  */
.header .button,
.header .button--primary,
.header .shopify-payment-button__button--unbranded {
  border-radius: 999px !important;
  padding-inline: 18px !important;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* 4) SEPET & CHECKOUT CTA’LARI */
/* Cart sayfasındaki ana checkout butonunu yakala */
.cart__checkout,
.cart__footer .button--primary {
  background: linear-gradient(135deg, #FFD95A, #FFB800) !important;
  color: #111 !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow:
    0 10px 24px rgba(255, 184, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Hover’da aynı 3D efekti */
.cart__checkout:hover,
.cart__footer .button--primary:hover {
  transform: scale(1.03) translateY(-1px);
  filter: brightness(1.04);
}

/* 5) MOBİLDE CTA’LARI BÜYÜT – TAM GENİŞLİK  */
@media (max-width: 768px) {

  .product-form__submit,
  .product__actions .button,
  .shopify-payment-button__button--unbranded {
    width: 100% !important;
    justify-content: center;
    font-size: 15px;
    padding-block: 14px !important;
  }

  .product-form__buttons,
  .product__actions {
    gap: 10px !important;
    flex-direction: column;
  }
}
/* ------------------------------------------ */
/* GRAIPHICS – APPLE STYLE CTA CHIP (GLOBAL) */
/* ------------------------------------------ */

.grai-cta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd75a, #ffb800);
  color: #111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow:
      0 2px 4px rgba(0,0,0,0.08),
      inset 0 1px 1px rgba(255,255,255,0.40);
  transition: transform .20s ease, box-shadow .20s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover (Desktop) */
.grai-cta-chip:hover {
  transform: scale(1.06);
  box-shadow:
      0 4px 10px rgba(0,0,0,0.12),
      inset 0 1px 1px rgba(255,255,255,0.45);
}

/* Mobil için dokunma efekti */
@media (max-width: 768px) {
  .grai-cta-chip:active {
    transform: scale(0.96);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.18),
        inset 0 1px 1px rgba(255,255,255,0.4);
  }
}
/* PAKET SEÇİCİ: Apple tarzı pill butonlar */
.product-form__input[name*="Paket"],
.product-form__input--pill {
  gap: 8px;
}

/* Radio’ları gizle */
.product-form__input--pill input[type="radio"],
.product-form__input input[type="radio"][name*="Paket"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Genel görünüm (seçilmemiş hâl) */
.product-form__input--pill input[type="radio"][name*="Paket"] + label,
.product-form__input input[type="radio"][name*="Paket"] + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}

/* Hover (masaüstü) */
.product-form__input--pill input[type="radio"][name*="Paket"] + label:hover,
.product-form__input input[type="radio"][name*="Paket"] + label:hover {
  background: #fefefe;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

/* Seçili hâl (altın gradient + glow) */
.product-form__input--pill input[type="radio"][name*="Paket"]:checked + label,
.product-form__input input[type="radio"][name*="Paket"]:checked + label {
  background: linear-gradient(180deg, #ffe58b, #ffb800);
  border-color: #ffb800;
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.55),
    0 14px 40px rgba(255, 184, 0, 0.45);
  color: #111;
  transform: translateY(-1px);
}

/* PRO paketini metinden işaretlemek için (option adı "Pro" ise) */
.product-form__input--pill label[for*="Pro"],
.product-form__input label[for*="Pro"] {
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* ÜRÜN KARTI hover motion */
.card-wrapper,
.card,
.product-card,
.collection-list__item {
  transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1), 
              box-shadow .25s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, box-shadow;
}

.card-wrapper:hover,
.card:hover,
.product-card:hover,
.collection-list__item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

/* Daha önce yaptığımız sarı chip butonlarını da hafif kaldır */
.grai-cta-chip {
  transform-origin: center;
}
.grai-cta-chip:hover {
  transform: translateY(-1px) scale(1.06);
}
/* ==== 1. APPLE STYLE STICKY HEADER ==== */

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),
              0 18px 45px rgba(0, 0, 0, 0.05);
}

/* Header içindeki nav ve ikonları biraz “Horizon / Apple” tarzı yapalım */
.header__inline-menu,
.header__icons {
  align-items: center;
}

.header__inline-menu a {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: 999px;
  padding: 6px 12px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.header__inline-menu a:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Dil/para ve sepet ikon kapsülleri */
.header__icon,
.header__icon--cart,
.header__icon--account {
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  padding: 8px 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.header__icon:hover,
.header__icon--cart:hover,
.header__icon--account:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
}
/* ==== 2. APPLE STYLE PAKET SEÇİCİ ==== */

.product-form__input input[type='radio'] {
  display: none;
}

.product-form__input input[type='radio'] + label {
  min-width: 110px;
  border-radius: 999px;
  border: 1px solid #e1e1e1;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease,
              border-color 0.2s ease;
}

.product-form__input input[type='radio'] + label:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

/* Seçili paket (Apple segmented control havası) */
.product-form__input input[type='radio']:checked + label {
  background: linear-gradient(135deg, #ffb800, #ffdd73);
  color: #111111;
  border-color: #ffb800;
  box-shadow: 0 14px 30px rgba(255, 184, 0, 0.35);
}

/* 3 paket yan yana güzel hizalansın */
.product-form__input .product-form__input--pill {
  display: flex;
  gap: 8px;
}
/* ==== 3. APPLE STYLE ANA CTA BUTONLAR ==== */

.product-form__submit,
.button--primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb800, #ffdd73);
  color: #111111;
  border: none;
  box-shadow: 0 16px 30px rgba(255, 184, 0, 0.45);
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              filter 0.2s ease, background 0.2s ease;
}

.product-form__submit:hover,
.button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(255, 184, 0, 0.55);
  filter: brightness(1.05);
}

.product-form__submit:active,
.button--primary:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(255, 184, 0, 0.35);
}
/* ==== 3b. HİZMETİ GÖR – APPLE STYLE ÇİP ==== */

.grai-cta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #111111, #222222);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.2s ease, color 0.2s ease;
}

.grai-cta-chip::after {
  content: "›";
  font-size: 13px;
  margin-left: 2px;
  opacity: 0.9;
}

.grai-cta-chip:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, #ffb800, #ffdd73);
  color: #111111;
}

.grai-cta-chip:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Mobilde taşmasın */
@media (max-width: 600px) {
  .grai-cta-chip {
    width: 100%;
    justify-content: center;
  }
}
/* ==== 6. PRODUCT CARD HOVER MOTION ==== */

.card-wrapper {
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background 0.22s ease;
  border-radius: 28px;
  overflow: hidden;
}

.card-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  background: #ffffff;
}

/* Kart içindeki görsel biraz zoom yapsın */
.card__media img {
  transition: transform 0.35s ease;
}

.card-wrapper:hover .card__media img {
  transform: scale(1.04);
}
/* ==== 8. LINK HOVER (ALT BLOKLAR / BLOG LİSTESİ) ==== */

.grai-links-list a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.grai-links-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #111111;
  transition: width 0.22s ease;
}

.grai-links-list a:hover::after {
  width: 100%;
}
/* ==== 10. PRO / PREMIUM CARD GLOW ==== */

.grai-pro-card {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.12), #ffffff);
  border: 2px solid #ffb800;
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.35),
    0 24px 60px rgba(255, 184, 0, 0.45);
}

/* Hafif hover efekti */
.grai-pro-card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.5),
    0 30px 80px rgba(255, 184, 0, 0.55);
  transform: translateY(-2px);
}
/* ----------------------------------------------
   GRAIPHICS – Premium External Link Icon (Auto)
   Apple-style minimal link indicator
   ---------------------------------------------- */

article a[href^="http"], 
.blog a[href^="http"],
.rte a[href^="http"],
.page-content a[href^="http"] {
    color: #ffb800 !important;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-right: 18px;  /* ikona yer aç */
}

/* İkonun kendisi */
article a[href^="http"]::after,
.blog a[href^="http"]::after,
.rte a[href^="http"]::after,
.page-content a[href^="http"]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 3px;
    opacity: 0.85;

    /* PREMIUM ICON — (Apple external square-arrow) */
    background-image: url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffb800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
        <path d='M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/>
        <polyline points='15 3 21 3 21 9'/>
        <line x1='10' y1='14' x2='21' y2='3'/>
      </svg>"
    );
}

/* Hover efekti – Apple-style micro motion */
article a[href^="http"]:hover::after,
.blog a[href^="http"]:hover::after,
.rte a[href^="http"]:hover::after,
.page-content a[href^="http"]:hover::after {
    transform: translate(1px, -1px);
    transition: 0.15s ease-out;
    opacity: 1;
}

/* ================= ROOT ================= */
:root {
  --gold: #FFB800;
  --gold-light: #FFE8A0;
  --premium-bg: #FFF3CC;
  --text-dark: #1A1A1A;
  --text-light: #666;
  --white: #FFF;
  --bg: #F7F7F7;
}

body {
  background: var(--bg);
  color: var(--text-dark);
  font-family: Inter, sans-serif;
}



/* ================= HERO ================= */
.g-hero {
  display: flex;
  justify-content: center;
  padding: 40px 20px 20px;
}

.g-hero-card {
  width: 100%;
  max-width: 1300px;
  background: var(--white);
  padding: 40px;
  border-radius: 18px;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  text-align: center;
}

.g-hero-card h1 {
  font-size: 38px;
  font-weight: 800;
}

.g-hero-sub {
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.g-btn-hero {
  margin-bottom: 16px;
}

.g-hero-info {
  font-size: 15px;
  background: var(--white);
  padding-top: 10px;
  border-top: 2px solid var(--gold);
  margin-top: 18px;
}



/* ================= BUTTONS ================= */
.g-btn-gold {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  color: black !important;
  padding: 12px 28px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 17px;
  transition: 0.2s;
  text-decoration: none;
}

.g-btn-gold:hover {
  transform: scale(1.05);
}

.g-btn-small {
  font-size: 15px;
  padding: 10px 22px;
}

.g-btn-wide {
  width: auto;
}



/* ================= TITLES ================= */
.g-title {
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 28px;
}



/* ================= VIDEO GRID ================= */
.g-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 20px;
}

.g-video-card {
  background: var(--white);
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

.g-video-wrap {
  position: relative;
  padding-bottom: 56%;
}

.g-video-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
}



/* ================= PHOTO GRID ================= */
.g-photo-grid {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 18px;
}

.g-photo-grid img {
  width: 100%;
  border-radius: 14px;
}



/* ================= PACKAGE CARDS ================= */
.g-packages {
  padding: 70px 20px;
}

/* PREMIUM ANA PAKET */
.g-card-premium {
  background: var(--premium-bg);
  border: 3px solid var(--gold);
  box-shadow: 0 6px 24px rgba(255,184,0,0.25);
  padding-top: 50px;
}

.g-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
}

.g-package-desc p {
  margin: 4px 0;
}

.g-package-row {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
  gap: 24px;
}

/* Normal paket kartı */
.g-card {
  background: var(--white);
  border-radius: 16px;
  border: 2px solid var(--gold);
  padding: 30px;
  text-align: center;
}



/* ================= REVIEWS ================= */
.g-reviews {
  padding: 60px 20px;
}

.g-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap: 20px;
  max-width: 1300px;
  margin: auto;
}

.g-review-card {
  background: var(--white);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 15px;
}



/* ================= STICKY CTA ================= */
.g-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: black;
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  color: white;
  z-index: 9999;
  align-items: center;
}

.g-sticky-left {
  font-size: 15px;
  font-weight: 600;
}

.g-btn-sticky {
  padding: 10px 20px !important;
  font-size: 15px !important;
}
/* Hepsi Bir Arada paket içeriğini ortala */
.g-card-premium {
  text-align: center !important;
}

.g-card-premium h3,
.g-card-premium .g-package-desc p,
.g-card-premium .g-price,
.g-card-premium .g-btn-wide {
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

/* Premium paket açıklama satırlarını dikey olarak mükemmel hizala */
.g-card-premium .g-package-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Hepsi Bir Arada Paket – köşe sorunu düzeltildi */
.g-card-premium {
  border-radius: 18px !important;
  overflow: hidden;
}
/* Premium paket iç metin boyutları */
.g-card-premium h3 {
  font-size: 30px !important;
}

.g-card-premium .g-package-desc p {
  font-size: 18px !important;
}

.g-card-premium .g-price {
  font-size: 32px !important;
}
/* Premium paket iç boşluk düzenlemesi */
.g-card-premium {
  padding: 45px 40px 40px !important;
}

.g-card-premium .g-package-desc {
  margin: 20px 0 20px !important;
}

.g-card-premium .g-btn-wide {
  margin-top: 15px !important;
}
.g-icon-black {
  letter-spacing: +4px;
}
/* =========================================
   APPLE STYLE PREMIUM CARDS
========================================= */

.g-card,
.g-card-premium,
.g-package-card,
.g-package-main {
  background: #ffffffcc; /* Apple glassy white */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 24px !important;
  border: 1px solid rgba(255, 184, 0, 0.25); /* very soft gold border */
  
  padding: 32px 28px !important;

  /* Apple shadow */
  box-shadow:
    0 8px 20px rgba(0,0,0,0.06),
    0 3px 6px rgba(0,0,0,0.04);

  transition: all .28s ease;
}

/* Hover Effect: subtle Apple lift */
.g-card:hover,
.g-card-premium:hover,
.g-package-card:hover,
.g-package-main:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.08),
    0 6px 12px rgba(0,0,0,0.05);
}

/* Premium main package stronger Apple shadow */
.g-card-premium {
  background: #fff7ddcc; /* premium gold-tinted white */
  border: 1px solid rgba(255, 184, 0, 0.45);
  box-shadow:
    0 10px 28px rgba(255, 184, 0, 0.15),
    0 4px 10px rgba(0,0,0,0.05);
}

.g-card-premium:hover {
  box-shadow:
    0 14px 34px rgba(255, 184, 0, 0.22),
    0 10px 18px rgba(0,0,0,0.05);
  transform: translateY(-5px) scale(1.02);
}

/* Typography refinements (Apple-like clean feel) */
.g-package-card h4,
.g-card-premium h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.g-package-desc p,
.g-package-card p {
  font-size: 17px;
  letter-spacing: -0.15px;
  color: #444;
}

/* Price bigger, cleaner */
.g-price {
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Badge Apple style */
.g-badge {
  background: #ffd876;
  color: #000;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(255,184,0,0.45);
}
.g-sticky-cta {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ============================================
   PREMIUM FROSTED GLASS EFFECT FOR ALL BUTTONS
============================================ */
.g-btn-gold {
  position: relative;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: linear-gradient(
      90deg,
      rgba(255, 184, 0, 0.85),
      rgba(255, 220, 120, 0.85)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}


/* Premium glass hover */
.g-btn-gold:hover {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background: linear-gradient(
      90deg,
      rgba(255, 200, 0, 0.9),
      rgba(255, 240, 160, 0.9)
  ) !important;
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.45);
}
/* ============================================
   GOLD RIM EFFECT FOR ALL GOLD BUTTONS
============================================ */
.g-btn-gold {
  position: relative;
  border: 1.4px solid rgba(255, 210, 90, 0.95) !important; /* gold rim */
  box-shadow:
    0 0 0 2px rgba(255, 184, 0, 0.18),     /* soft gold halo */
    0 4px 12px rgba(0,0,0,0.08);           /* apple drop shadow */
  transition: all .25s ease;
}

/* Hover – premium shine */
.g-btn-gold:hover {
  border-color: rgba(255, 225, 120, 1) !important;
  box-shadow:
    0 0 0 3px rgba(255, 210, 90, 0.28),    /* stronger glow */
    0 6px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px) scale(1.015);
}
/* Fotoğraf Hover */
.g-photo-grid img {
  transition: all 0.35s cubic-bezier(.22, .61, .36, 1);
  border-radius: 14px;
}

.g-photo-grid img:hover {
  transform: scale(1.03);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.12),
    0 0 16px rgba(255, 190, 0, 0.28); /* soft gold aura */
}
/* Video Hover */
.g-video-card {
  transition: all 0.35s cubic-bezier(.22, .61, .36, 1);
  border-radius: 18px;
  overflow: hidden;
}

.g-video-card:hover {
  transform: scale(1.03);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.16),
    0 0 18px rgba(255, 190, 0, 0.30); /* gold aura */
}

.g-video-card iframe {
  border-radius: 18px;
}

.g-card,
.g-package-card,
.g-package-main {
  background: #f7f1df !important;
}
background: linear-gradient(90deg, #e5b100, #ffdd72);
.g-card:hover,
.g-package-card:hover,
.g-package-main:hover {
  transform: scale(1.015) translateY(-4px) !important;
}
.g-card::before,
.g-card-premium::before {
  opacity: 0.35 !important;
}
.g-card-premium:hover {
  box-shadow:
    0 16px 36px rgba(229, 177, 0, 0.55),
    0 0 34px rgba(255, 220, 90, 0.55);
}
.g-card:hover,
.g-package-card:hover {
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    0 0 22px rgba(229, 177, 0, 0.45);
}
.g-btn-gold {
  border: 2px solid #e5b100 !important;
}
.g-btn-gold {
  background: linear-gradient(180deg, #ffdf88, #e5b100);
}
.g-hero-card {
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.06),
    0 0 18px rgba(229,177,0,0.25);
  background: #faf3dd !important;
}
.g-hero-card::after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:10%;
  width:80%;
  height:20px;
  background: radial-gradient(circle, rgba(229,177,0,0.35), transparent);
}
.g-hero-card {
  background: #faf3dd !important;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.06),
    0 0 18px rgba(229,177,0,0.25);
}
.g-hero-card::after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:10%;
  width:80%;
  height:20px;
  background: radial-gradient(circle, rgba(229,177,0,0.35), transparent);
}
.g-badge-premium {
  position: absolute;
  top: 0px;
  left: 24px;
  background: linear-gradient(90deg, #f4c400, #ffe9a3);
  color: #000;
  padding: 10px 26px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.18),
    0 0 12px rgba(255, 220, 120, 0.6);
  z-index: 10;
}

.g-card-premium {
  background: #f3e7c3 !important; /* daha sıcak premium krem */
  border: 2px solid #e5b100 !important;
  box-shadow:
    0 12px 30px rgba(229,177,0,0.28),
    0 0 32px rgba(255,220,90,0.55);
}
.g-card-premium .g-package-desc {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.g-card-premium .g-package-desc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #e5b100, #ffea94, #e5b100);
  border-radius: 4px;
}
.g-card-premium:hover {
  transform: scale(1.022) translateY(-6px) !important;
  box-shadow:
    0 18px 40px rgba(229,177,0,0.45),
    0 0 40px rgba(255,220,120,0.75);
}
.g-card-premium::before {
  opacity: 0.45 !important;
}

.g-card-premium {
  background: #f1e2b3 !important;  /* daha zengin altın-krem */
}
.g-card-premium {
  border: 3px solid #e1b000 !important;
  border-radius: 28px !important;
}
.g-card-premium:hover {
  transform: scale(1.075) translateY(-8px) !important;
  box-shadow:
    0 18px 45px rgba(229, 177, 0, 0.55),
    0 0 40px rgba(255, 225, 120, 0.8);
}
.g-card-premium h3 {
  font-size: 30px;
  font-weight: 900;
}
.g-card-premium .g-price {
  font-size: 36px !important;
  color: #000;
}
.g-card-premium .g-package-desc::after {
  height: 3px;
  opacity: 0.9;
}.g-card-premium {
  position: relative;
  overflow: hidden; /* shimmer taşmasın */
}
.g-card-premium::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.35) 35%,
      rgba(255,255,255,0) 65%
  );
  transform: skewX(-20deg);
  animation: shimmerSlide 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSlide {
  0% {
    left: -150%;
  }
  55% {
    left: 110%;
  }
  100% {
    left: 110%;
  }
}
.g-card-premium {
  position: relative;
  overflow: hidden;
}
/* --- Particle 1 (küçük yıldızlar) --- */
.g-card-premium .star1,
.g-card-premium .star2,
.g-card-premium .star3 {
  position: absolute;
  font-size: 14px;
  color: rgba(255,220,120,0.9);
  opacity: 0;
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
}

/* Partikül pozisyonları */
.g-card-premium .star1 { top: 18%; left: 22%; animation-delay: 0.4s; }
.g-card-premium .star2 { top: 48%; left: 78%; animation-delay: 1.3s; }
.g-card-premium .star3 { top: 72%; left: 36%; animation-delay: 2.1s; }
@keyframes sparkle {
  0% { transform: scale(0.6); opacity: 0; }
  20% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.8); opacity: 0.6; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.4); opacity: 0; }
}
/* ===== FAQ ===== */
.g-faq {
  max-width: 900px;
  margin: 70px auto;
  padding: 0 15px;
}

.g-faq-item {
  border: 1px solid rgba(255, 193, 7, 0.4);
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #fffef9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.g-faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 20px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: 0.3s ease;
}

.g-faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b88a00;
  font-weight: bold;
}

.g-faq-item.active .g-faq-question::after {
  content: "–";
}

.g-faq-item.active .g-faq-question {
  color: #b88a00;
}

.g-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  transition: max-height 0.35s ease;
}

.g-faq-item.active .g-faq-answer {
  padding: 15px 20px 18px;
  max-height: 300px;
}
/* ===== FAQ ITEM ===== */
.g-faq-item {
  border: none;
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  background: #f7f1df; /* soru background */
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 0 6px rgba(255,200,0,0.25);
  transition: 0.3s ease;
}

/* Hover efekti (kart için) */
.g-faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 0 10px rgba(255,200,0,0.35);
}

/* ===== SORU ===== */
.g-faq-question {
  width: 100%;
  background: #e8dcbf; /* daha tok arka plan */
  border: none;
  padding: 20px 22px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #2d2d2d;
  cursor: pointer;
  position: relative;
  transition: 0.25s ease;
}

/* Soru hover */
.g-faq-question:hover {
  background: #f2e5c7;
  color: #b88a00;
}

/* + ve - işareti */
.g-faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b88a00;
  font-weight: bold;
  transition: 0.25s ease;
}

.g-faq-item.active .g-faq-question::after {
  content: "–";
}

/* ===== CEVAP ===== */
.g-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  background: #fffef9; /* daha açık background */
  color: #444;
  font-size: 16px;
  line-height: 1.6;
  transition: max-height 0.35s ease, padding 0.3s ease;
}

.g-faq-item.active .g-faq-answer {
  padding: 18px 22px 22px;
  max-height: 400px;
}
/* === FAQ WRAPPER === */
.g-faq {
  max-width: 900px;
  margin: 70px auto;
  padding: 0 15px;
}

/* === FAQ ITEM (Card) === */
.g-faq-item {
  background: #f7f1df;
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 0 8px rgba(255,200,0,0.25);
  transition: 0.3s ease;
  position: relative;
}

/* Hover card */
.g-faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 0 12px rgba(255,200,0,0.35);
}

/* === SORU BAŞLIĞI === */
/* === SORU BAŞLIĞI (GÜNCELLENDİ) === */
.g-faq-question {
  width: 100%;
  background: #e8dcbf;
  border: none;
  /* padding sıralaması: Üst - Sağ - Alt - Sol 
     Soldaki 50px'i 65px yaparak metni sağa ittik.
  */
  padding: 22px 55px 22px 85px; 
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #2d2d2d;
  cursor: pointer;
  position: relative;
  transition: 0.25s ease;
}

/* Hover effect */
.g-faq-question:hover {
  background: #f2e5c7;
  color: #b88a00;
}

/* === Premium ✦ ICON === */
.g-faq-question::before {
  content: "✦";
  position: absolute;
  left: 5px; /* İkonu da hafifçe ortalamak için 18px'den 20px'e çektim */
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px; /* İkonu biraz daha belirginleştirdim */
  color: #b88a00;
}
}

/* === Arrow Icon === */
.g-faq-question::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 16px;
  color: #b88a00;
  transition: 0.25s ease;
}

.g-faq-item.active .g-faq-question::after {
  transform: translateY(-50%) rotate(180deg);
}

/* === SORU ALTIN ÇİZGİ === */
.g-faq-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, #e5b100, #ffdd72, #e5b100);
  opacity: 0.25;
}

/* === CEVAP === */
.g-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  background: #fffef9;
  color: #444;
  font-size: 16px;
  line-height: 1.6;
  transition: max-height 0.35s ease, padding 0.25s ease;
  position: relative;
}

/* === CEVAP GOLD LEFT BORDER === */
.g-faq-answer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 4px;
  height: calc(100% - 36px);
  background: linear-gradient(180deg, #e5b100, #ffdd72);
  border-radius: 3px;
  opacity: 0;
  transition: 0.25s ease;
}

.g-faq-item.active .g-faq-answer::before {
  opacity: 1;
}

.g-faq-item.active .g-faq-answer {
  max-height: 400px;
  padding: 20px 22px 22px 22px;
}
/* ===================
   MOBILE RESPONSIVE
   =================== */

@media (max-width: 768px) {

  /* HERO */
  .g-hero-card {
    margin: 20px;
    padding: 25px;
  }

  .g-hero-card h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .g-hero-sub {
    font-size: 16px;
  }

  /* VIDEO GRID – tek kolon */
  .g-video-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* PHOTO GRID – tek kolon */
  .g-photo-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .g-photo-grid img {
    width: 100%;
    height: auto;
  }

  /* PREMIUM PAKET */
  .g-package-main {
    padding: 28px 20px;
    margin-bottom: 35px;
  }

  .g-package-main h3 {
    font-size: 20px;
  }

  .g-package-desc p {
    font-size: 16px;
  }

  /* 4 küçük paket – tek kolon */
  .g-package-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .g-package-card {
    padding: 22px 20px;
  }

  .g-price {
    font-size: 18px;
  }

  /* SSS */
  .g-faq-question {
    padding: 18px 45px 18px 55px;
    font-size: 17px;
  }

  .g-faq-question::before {
    left: 5px;
  }

  .g-faq-question::after {
    right: 15px;
  }

  /* Sticky CTA */
  .g-sticky-cta {
    padding: 12px 14px;
    gap: 10px;
    flex-direction: column;
  }

  .g-btn-sticky {
    width: 100%;
    text-align: center;
  }

}
/* === HEPSİ BİR ARADA PAKET (PLATINUM EDITION) === */
.g-card-premium {
  background: linear-gradient(
      135deg,
      #f7f7f7 0%,
      #e8e8e8 25%,
      #f4f4f4 50%,
      #dcdcdc 75%,
      #f9f9f9 100%
  );
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.12),
    0 0 18px rgba(255,255,255,0.7) inset,
    0 0 22px rgba(200,200,200,0.3);
  backdrop-filter: blur(8px);
}
.g-card-premium {
  position: relative;
  overflow: hidden;
}

.g-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.07) 0px,
    rgba(255,255,255,0.07) 1px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 3px
  );
  opacity: 0.22;
  pointer-events: none;
}
.g-card-premium {
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.15),
    0 0 0 2px rgba(255,215,100,0.35);
}
/* ==== GERÇEK PLATINUM BACKGROUND FORCE OVERRIDE ==== */
section.g-packages .g-package-main.g-card-premium {
  background: linear-gradient(
      135deg,
      #f8f8f8 0%,
      #e5e5e5 20%,
      #f2f2f2 50%,
      #d9d9d9 80%,
      #f7f7f7 100%
  ) !important;

  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.15),
    0 0 0 2px rgba(255,215,100,0.35),
    inset 0 0 18px rgba(255,255,255,0.6) !important;

  backdrop-filter: blur(10px);
}
section.g-packages .g-package-main.g-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 2px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
  );
  opacity: 0.35;
  pointer-events: none;
}
/* =====================================================
   HEPSİ BİR ARADA PAKET — APPLE VISION PRO PREMIUM CARD
   ===================================================== */

section.g-packages .g-package-main.g-card-premium {
  position: relative;
  background: linear-gradient(
      135deg,
      #f4f4f4 0%,
      #dcdcdc 30%,
      #efefef 65%,
      #e1e1e1 100%
  ) !important;
  border-radius: 20px;
  overflow: hidden;
  padding: 40px 30px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.15),
    0 0 0 2px rgba(210,210,210,0.7),
    0 0 40px rgba(120,180,255,0.35); /* platinum-blue glow */
  transition: all .35s ease;
}

/* === Chrome Reflection Hover Effect === */
section.g-packages .g-package-main.g-card-premium:hover {
  box-shadow:
    0 14px 30px rgba(0,0,0,0.22),
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 55px rgba(140,200,255,0.55); /* stronger blue glow */
  transform: translateY(-4px);
}

/* === Platinum Noise Texture (metal surface) === */
section.g-packages .g-package-main.g-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 3px
  );
  opacity: 0.30;
  pointer-events: none;
}

/* === Vision Pro Border Animation === */
section.g-packages .g-package-main.g-card-premium::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: conic-gradient(
      from 0deg,
      rgba(120,180,255,0.0),
      rgba(120,180,255,0.25),
      rgba(255,255,255,0.4),
      rgba(120,180,255,0.25),
      rgba(120,180,255,0.0)
  );
  z-index: 3;
  opacity: 0.7;
  animation: visionBorder 6s linear infinite;
  pointer-events: none;
}

@keyframes visionBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Platinum Shimmer Sweep === */
section.g-packages .g-package-main.g-card-premium .platinum-shimmer {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.65) 45%,
      rgba(255,255,255,0) 70%
  );
  transform: skewX(-20deg);
  animation: shimmerPlatinum 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes shimmerPlatinum {
  0% { left: -150%; }
  55% { left: 120%; }
  100% { left: 120%; }
}

/* === Soft Blue Corner Highlight === */
section.g-packages .g-package-main.g-card-premium::before {
  box-shadow:
    inset -40px -40px 80px rgba(120,180,255,0.2),
    inset 40px 40px 80px rgba(255,255,255,0.28);
}
/* ======================
   GLOBAL 3D TILT SYSTEM
   ====================== */

.g-card,
.g-package-card,
.g-package-main,
.g-video-card,
.g-review-card,
.g-hero-card {
  perspective: 900px;
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.3s ease;
}

/* === 3D tilt on hover === */
.g-card:hover,
.g-package-card:hover,
.g-package-main:hover,
.g-video-card:hover,
.g-review-card:hover,
.g-hero-card:hover {
  transform: rotateX(6deg) rotateY(-6deg) translateY(-4px);
  box-shadow:
    0 18px 35px rgba(0,0,0,0.18),
    0 0 18px rgba(255,215,100,0.25); /* soft gold aura */
}

/* === Stronger effect for premium main card === */
.g-card-premium:hover {
  transform: rotateX(8deg) rotateY(-8deg) translateY(-6px) scale(1.02);
  box-shadow:
    0 25px 45px rgba(0,0,0,0.25),
    0 0 25px rgba(120,180,255,0.45); /* platinum blue glow */
}

/* Disable 3D on mobile (important) */
@media (max-width: 768px) {
  .g-card,
  .g-package-card,
  .g-package-main,
  .g-video-card,
  .g-review-card,
  .g-hero-card {
    transform: none !important;
    transition: none !important;
  }
}
/* ===========================
   PHOTO CARD TRANSFORMATION
   =========================== */

.g-photo-grid img {
  border-radius: 18px;
  display: block;
  width: 100%;
  background: #fafafa;
  padding: 10px;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.08),
    0 0 12px rgba(255,215,100,0.18);
  transition: all 0.35s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}

/* Hover — premium card effect */
.g-photo-grid img:hover {
  transform: scale(1.04) rotateX(6deg) rotateY(-6deg);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.18),
    0 0 16px rgba(255,215,100,0.30);
}

/* Add subtle border frame */
.g-photo-grid img {
  border: 1px solid rgba(255,255,255,0.9);
}

/* Make grid spacing nicer */
.g-photo-grid {
  gap: 22px !important;
}
/* === Shimmer Container === */
.g-photo-grid img {
  position: relative;
  overflow: hidden;
}

/* === Shimmer Layer === */
.g-photo-grid img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.45) 45%,
      rgba(255,255,255,0) 70%
  );
  transform: skewX(-20deg);
  animation: photoShimmer 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes photoShimmer {
  0% { left: -150%; }
  55% { left: 120%; }
  100% { left: 120%; }
}
/* === Animated Gold Border Wrapper === */
.g-photo-grid img::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    rgba(255,215,120,0.0),
    rgba(255,215,120,0.45),
    rgba(255,245,200,0.8),
    rgba(255,215,120,0.45),
    rgba(255,215,120,0.0)
  );
  z-index: -1;
  animation: photoBorderSpin 8s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

@keyframes photoBorderSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.g-photo-grid img {
  border-radius: 18px;
  background: #fafafa;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.08),
    0 0 12px rgba(255,215,100,0.18);
  transition: all 0.35s cubic-bezier(.22,.61,.36,1);
}

/* Hover 3D effect */
.g-photo-grid img:hover {
  transform: scale(1.04) rotateX(6deg) rotateY(-6deg);
  box-shadow:
    0 16px 28px rgba(0,0,0,0.18),
    0 0 18px rgba(255,215,100,0.35);
}
/* =======================
   HERO – GOLD PREMIUM (Minimal)
===========================*/

.g-hero-card {
  position: relative;
  padding: 60px 40px;
  border-radius: 26px;

  /* Soft gold frame */
  background: #fffdf8;
  border: 1px solid rgba(255, 208, 120, 0.55);

  /* Soft 3D depth */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.06),
    0 0 14px rgba(255,186,73,0.15) inset;

  transition: all .35s ease;
}

/* Hover: hafif yukarı kalkma + gold glow */
.g-hero-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.1),
    0 22px 44px rgba(0,0,0,0.08),
    0 0 22px rgba(255,186,73,0.25) inset;
}

/* Minimal shimmer */
.g-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    130deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  opacity: 0;
  pointer-events: none;
  animation: heroShimmer 5.5s infinite;
}

@keyframes heroShimmer {
  0% { opacity: 0; transform: translateX(-120%); }
  40% { opacity: .35; }
  100% { opacity: 0; transform: translateX(120%); }
}
/* =============================
   DEFAULT BUTTONS → Gold Glass
=============================*/

.g-package-card .g-btn-gold,
.g-hero-card .g-btn-gold,
.g-btn-sticky {
  padding: 12px 28px;
  border-radius: 50px;
  border: 1px solid rgba(255, 215, 149, 0.55);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  font-weight: 600;
  color: #000;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
}

/* Hover */
.g-package-card .g-btn-gold:hover,
.g-hero-card .g-btn-gold:hover,
.g-btn-sticky:hover {
  border-color: rgba(255, 195, 80, 0.85);
  background: rgba(255, 255, 255, 0.40);
  transform: translateY(-2px);
}

/* Shimmer */
.g-package-card .g-btn-gold::after,
.g-hero-card .g-btn-gold::after,
.g-btn-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-150%);
  transition: 0.6s;
}

.g-package-card .g-btn-gold:hover::after,
.g-hero-card .g-btn-gold:hover::after,
.g-btn-sticky:hover::after {
  transform: translateX(150%);
}
/* ============================================
   HEPSİ BİR ARADA → Chrome Edge Luxury Button
===============================================*/

.g-package-main .g-btn-gold {
  padding: 12px 28px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  border: 2px solid transparent;
  background-clip: padding-box;
  color: #222;
  font-weight: 600;
  position: relative;
  transition: .3s ease;
}

/* Chrome kenar */
.g-package-main .g-btn-gold::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: linear-gradient(135deg, #fff, #ddd, #999, #eee, #fff);
  z-index:-1;
}

/* Hover: metal flash */
.g-package-main .g-btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}

.g-package-main .g-btn-gold:hover::before {
  background: linear-gradient(135deg, #fff, #f4f4f4, #ccc, #eee, #fff);
}
/* ================================
   GRAIPHICS PREMIUM HEADER
   ================================ */

.g-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #f4f4f4;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.g-header-inner {
  max-width: 1350px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.g-logo {
  font-size: 24px;
  font-weight: 700;
  color: #121212;
  letter-spacing: -0.5px;
  text-decoration: none;
}

/* DESKTOP NAVIGATION */
.g-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.g-nav a {
  font-size: 16px;
  color: #222;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 50px;
  transition: 0.2s;
}

.g-nav a:hover {
  background: #fff7df;
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.35);
  color: #111;
}

/* DROPDOWN */
.g-dropdown {
  position: relative;
}

.g-dropdown-trigger {
  background: #fff;
  border: none;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 50px;
  cursor: pointer;
  color: #222;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.25s;
}

.g-dropdown-trigger:hover {
  background: #fff7df;
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.35);
}

/* Dropdown Icon */
.g-dropdown-icon {
  color: #FFB800;
  font-size: 14px;
  transition: 0.2s;
}

/* Dropdown Menu */
.g-dropdown-menu {
  display: none;
  position: absolute;
  top: 48px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 12px 0;
  min-width: 240px;
  z-index: 999;
}

.g-dropdown:hover .g-dropdown-menu {
  display: block;
}

.g-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #222;
  font-size: 15px;
  text-decoration: none;
  transition: 0.2s;
}

.g-dropdown-menu a:hover {
  background: #fff3cf;
  color: #000;
}

/* ACTION ICONS */
.g-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.g-header-icon {
  color: #222;
  font-size: 22px;
  text-decoration: none;
  transition: 0.25s;
}

.g-header-icon:hover {
  color: #FFB800;
  text-shadow: 0 0 12px rgba(255, 184, 0, 0.7);
}

/* BURGER BUTTON */
.g-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.g-burger span {
  width: 26px;
  height: 3px;
  background: #222;
  transition: 0.3s;
}

/* ================================
   MOBILE MENU
   ================================ */
.g-mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  position: fixed;
  top: 0;
  right: -100%;
  width: 78%;
  height: 100vh;
  padding: 30px 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  transition: right 0.35s ease;
  z-index: 99999;
}

.g-mobile-menu.active {
  right: 0;
}

.g-mobile-menu a {
  font-size: 18px;
  padding: 14px 0;
  text-decoration: none;
  color: #111;
}

/* MOBILE DROPDOWN */
.g-mobile-dropdown {
  margin-top: 10px;
}

.g-mobile-trigger {
  background: none;
  border: none;
  padding: 14px 0;
  width: 100%;
  text-align: left;
  font-size: 18px;
  color: #222;
  cursor: pointer;
}

.g-mobile-submenu {
  display: none;
  flex-direction: column;
  padding-left: 14px;
}

.g-mobile-dropdown.open .g-mobile-submenu {
  display: flex;
}

.g-mobile-submenu a {
  padding: 10px 0;
  font-size: 16px;
}

/* ================================
   RESPONSIVE RULES
   ================================ */
@media (max-width: 992px) {
  .g-nav {
    display: none;
  }
  .g-burger {
    display: flex;
  }
}
.g-nav a,
.g-dropdown-trigger {
  font-weight: 400 !important;
}
.g-dropdown {
  position: relative;
}

.g-dropdown-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: white;
  padding: 14px 0;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.25s ease;
  min-width: 220px;
  z-index: 9999;
}

/* Açılma kontrolü ↓ */
.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* HEADER WRAPPER */
.g-header {
  width: 100%;
  background: #fff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 5000;
  box-shadow: 0 1px 20px rgba(0,0,0,0.05);
}

/* INNER */
.g-header-inner {
  width: 92%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.g-logo {
  font-size: 23px;
  font-weight: 600;
  color: #222;
}

/* NAV */
.g-nav {
  display: flex;
  align-items: center;
  gap: 35px;
}

.g-nav a {
  text-decoration: none;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  transition: 0.2s;
}

.g-nav a:hover {
  color: #FFB800;
}

/* DROPDOWN TRIGGER */
.g-dropdown-trigger {
  background: none;
  border: none;
  font-size: 16px;
  color: #222;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: 0.2s;
}

.g-dropdown-trigger:hover {
  color: #FFB800;
}

/* DROPDOWN MENU */
.g-dropdown {
  position: relative;
}

.g-dropdown-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: #fff;
  padding: 14px 0;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.25s ease;
  min-width: 200px;
}

.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.g-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #222;
  font-size: 15px;
  transition: 0.2s;
}

.g-dropdown-menu a:hover {
  background: #FFF7DD;
  color: #FFB800;
}

/* ICONS */
.g-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.g-header-icon {
  color: #222;
  transition: 0.2s;
}

.g-header-icon:hover {
  color: #FFB800;
}

/* MOBILE */
@media(max-width: 900px) {

  .g-nav { display: none; }

  .g-burger {
    display: flex;
  }

  .g-mobile-menu {
    display: none;
  }

  .g-mobile-menu.active {
    display: block;
  }
}
/* ========================= */
/*   GRAIPHICS MOBILE HEADER FIX   */
/* ========================= */

.g-header {
  width: 100%;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 99999;
  border-bottom: 1px solid #f0f0f0;
}

/* Logo */
.g-logo {
  font-size: 20px;
  font-weight: 700;
}

/* Menü container */
.g-header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Menü sağdaki ikonlar */
.g-header-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger */
.g-burger {
  font-size: 22px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}



/* Mobil uyumluluk */
@media (max-width: 768px) {
  .g-header {
    padding: 10px 16px;
  }

  .g-header-inner {
    gap: 12px;
  }

  .g-logo {
    font-size: 18px;
  }

  .g-header-icons {
    gap: 10px;
  }
}
/* ========================= */
/*  GRAIPHICS PREMIUM HEADER */
/* ========================= */

.g-header {
  width: 100%;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 99999;
  border-bottom: 1px solid #f2f2f2;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Full flex wrapper */
.g-header-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.g-logo {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

/* Desktop NAV */
.g-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.g-nav a {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  transition: 0.25s;
}

.g-nav a:hover {
  color: #E5B100;
}

/* Dropdown */
.g-dropdown {
  position: relative;
}

.g-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

.g-dropdown-trigger:hover {
  color: #E5B100;
}

.g-dropdown-icon {
  display: inline-block;
  transform: translateY(1px);
  font-size: 10px;
}

/* Dropdown menu */
.g-dropdown-menu {
  position: absolute;
  top: 28px;
  left: 0;
  background: #fff;
  border-radius: 10px;
  padding: 12px 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  display: none;
  min-width: 200px;
  z-index: 9999;
}

.g-dropdown:hover .g-dropdown-menu {
  display: block;
}

.g-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: #333;
}

.g-dropdown-menu a:hover {
  background: #faf7e6;
  color: #E5B100;
}

/* Header icons */
.g-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.g-header-icon svg {
  stroke: #333;
  transition: 0.25s;
}

.g-header-icon:hover svg {
  stroke: #E5B100;
}

/* Burger */
.g-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.g-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  transition: 0.3s;
}

/* ===================== */
/*      MOBILE           */
/* ===================== */

@media(max-width: 900px) {
  .g-nav {
    display: none;
  }

  .g-burger {
    display: flex;
  }

  .g-header-actions {
    gap: 12px;
  }
}

/* MOBILE MENU */
.g-mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.g-mobile-menu.active {
  display: flex;
}

.g-mobile-menu a {
  padding: 12px 0;
  font-size: 16px;
  color: #333;
}

.g-mobile-dropdown .g-mobile-trigger {
  background: none;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  text-align: left;
}

.g-mobile-submenu {
  display: none;
  padding-left: 10px;
}

.g-mobile-dropdown.active .g-mobile-submenu {
  display: block;
}
.g-header {
  width: 100%;
  max-width: 100%;
  transform: none !important;
}

.g-header *,
.g-mobile-menu * {
  max-width: 100% !important;
  overflow-x: hidden;
}
/* g-dropdown-menu başlangıç gizleme kurallarını değiştirin */
.g-dropdown-menu {
    position: absolute;
    top: 42px;
    background: #fff;
    padding: 14px 0;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    /* GİZLEME YÖNTEMİ: display:none yerine visibility/opacity kullanın */
    opacity: 0;
    visibility: hidden; /* Gizli olsa bile hover ile etkileşim almasını engellemek için */
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    min-width: 200px;
    z-index: 9999;
}

/* Açılma kontrolünü güncelleyin */
.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
    opacity: 1;
    visibility: visible; /* Gizlemeyi kaldırın */
    pointer-events: auto;
    transform: translateY(0);
}/* header'ın tüm yatay taşmaları engellediğinden emin olun */
.g-header, .g-header-inner {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Bu kuralı g-header'a eklemek genellikle taşıma sorununu çözer. */
}/* Masaüstü Açılır Menü (görünürlük ve geçiş sorunu çözümü) */

/* Başlangıçta gizleme kuralları: Display:none yerine visibility/opacity kullanın */
.g-dropdown-menu {
    position: absolute;
    top: 42px;
    left: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 9999;
    /* DİKKAT: Diğer bir kural display: none uyguluyorsa, onu geçmek için bu kuralı ekleyin */
    display: block; 
}

/* AÇILMA KURALI: Display:block ile görünürlüğü zorlayın */
.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    display: block !important; /* Herhangi bir çakışmayı önler */
}/* Mobil Menü Konumlandırma ve Kaydırma (Off-Canvas) */

.g-mobile-menu {
    /* Kaydırma mekaniği için gerekenler */
    position: fixed;
    top: 0;
    right: -100vw; /* Gizle (Ekran genişliği kadar sağa kaydır) */
    width: min(300px, 80vw); /* Genişliği sabitle (Örn: 300px veya max 80vw) */
    height: 100vh; /* Tam yükseklik */
    z-index: 99999; /* En üstte görünmesini sağlar */
    transition: right 0.35s ease;

    /* Görünüm stilleri (mevcut flex kalsın) */
    display: flex; 
    flex-direction: column;
    background: #fff;
    padding: 30px 24px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}

.g-mobile-menu.active {
    right: 0; /* Aç - İçeri kaydır */
}

/* Mobil Menü Alt Menü Açılma Fixi (g-mobile-dropdown) */
.g-mobile-dropdown.active .g-mobile-submenu {
    display: flex !important; /* Alt menünün açılmasını zorla */
}

/* Mobil Genişlik / Büyük Sayfa Sorunu Fixi */
/* Yatay kaydırmayı engeller */
body {
    overflow-x: hidden;
}

/* Eğer menü açıkken arkadaki içeriğin kaymasını engellemek isterseniz */
.g-mobile-menu.active ~ #MainContent,
.g-mobile-menu.active ~ .content-for-layout {
    overflow: hidden;
    pointer-events: none;
}/* Mobil ve Masaüstü elemanlarının görünürlüklerini garanti altına alın */
@media (max-width: 900px) {
    /* Masaüstü Navigasyonunu Gizle */
    .g-nav {
        display: none !important;
    }
    /* Hamburger Butonunu Göster */
    .g-burger {
        display: flex !important;
    }
}

@media (min-width: 901px) {
    /* Masaüstü Navigasyonunu Göster */
    .g-nav {
        display: flex !important;
    }
    /* Hamburger Butonunu Gizle */
    .g-burger {
        display: none !important;
    }
}/* GRAIPHICS HEADER KESİN OVERRIDE CSS */

/* 1. MOBİL TAŞMA VE SAYFA KAYMA SORUNU FIX */
/* Sayfa genişliğinin mobil cihazda taşmasını önler */
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Header yapısının taşmasını önler ve z-index'i güçlendirir */
.g-header, .g-header-inner {
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 999999 !important;
    position: sticky;
}

/* 2. MASAÜSTÜ DROPDOWN MENÜ FIX (Hover/Açılma Sorunu) */
.g-dropdown-menu {
    /* Animasyonun çalışması için display: none yerine visibility/opacity kullanın */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Konumlandırmayı kesinleştirin */
    position: absolute !important; 
    top: 42px !important; 
    z-index: 99999 !important;
    /* Mevcut transition kurallarınız kalsın */
}

.g-dropdown:hover .g-dropdown-menu,
.g-dropdown:focus-within .g-dropdown-menu {
    /* EZİLMEYİ ÖNLEMEK İÇİN ÖNEMLİ: display: none kuralını ezin */
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 3. MOBİL MENÜ FIX (Kayarak Açılma Sorunu) */
/* Menünün kayarak açılması için fixed position ve right kullanın */
.g-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100vw !important; /* Başlangıçta ekran dışı */
    width: min(320px, 85vw) !important; /* Menü genişliğini sınırla */
    height: 100vh !important; /* Tam dikey yükseklik */
    z-index: 999999 !important;
    transition: right 0.35s ease !important;
    display: flex !important; /* display: none'ı kaldırın */
}

.g-mobile-menu.active {
    right: 0 !important; /* Aktifken ekran içine kaydır */
}

/* Mobil Menü Alt Menü Açılma Fixi */
.g-mobile-dropdown.active .g-mobile-submenu {
    display: flex !important;
}/* === GRAIPHICS KESİN DÜZELTMELER === */

/* 1. MOBİL EKRAN TAŞMA VE ZOOM SORUNU ÇÖZÜMÜ */
html, body {
    overflow-x: hidden !important; /* Sağa sola kaymayı engeller */
    width: 100% !important;
    max-width: 100vw !important; /* Ekran genişliğini sınırlar */
    margin: 0 !important;
    padding: 0 !important;
}

/* Header'ın mobilde ekranı taşmamasını garantiye al */
.g-header, .g-header-inner, .g-mobile-menu {
    width: 100vw !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. MASAÜSTÜ MENÜNÜN OKLARDAN KURTULMASI VE AÇILMASI */
.g-dropdown-trigger {
    appearance: none !important; /* Tarayıcı oklarını siler */
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Menüyü görünür yapma zorlaması */
.g-dropdown-menu {
    display: block !important; /* Yapı olarak var olsun */
    visibility: hidden !important; /* Ama görünmesin */
    opacity: 0 !important;
    top: 100% !important; /* Tam altına hizala */
    pointer-events: none !important;
    transition: all 0.2s ease !important;
}

/* Mouse üzerine gelince açıl */
.g-dropdown:hover .g-dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}/* --- YENİ: NASIL ÇALIŞIR BÖLÜMÜ (PROCESS) --- */
.g-process {
    padding: 60px 20px;
    text-align: center;
}
.g-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto 0;
}
.g-process-card {
    position: relative;
    /* g-card özelliklerini miras alır, ekstra ayarlar: */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px !important;
}
.g-step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFB800, #FFE58F);
    color: #000;
    font-weight: 800;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.4);
    border: 2px solid #fff;
}
.g-process-card h4 { margin: 10px 0; font-size: 20px; }
.g-process-card p { font-size: 15px; color: #555; }


/* --- YENİ: ACİLİYET VE SINIRLI SÜRE ROZETLERİ --- */

/* Küçük Kartlar için "Sınırlı Süre" Rozeti */
.g-package-card {
    position: relative; /* Rozeti konumlandırmak için */
}
.g-badge-limited {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #FFEDF6; /* Çok açık kırmızı/pembe zemin */
    color: #D93025; /* Kırmızı yazı */
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(217, 48, 37, 0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 2;
}

/* Premium Kart İçin Aciliyet Bannerı */
.g-urgency-banner {
    background: rgba(255, 0, 0, 0.08);
    color: #D93025;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

/* Mobilde Nasıl Çalışır Bölümü Düzeltmesi */
@media (max-width: 768px) {
    .g-process-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta */
    }
    .g-process-card {
        margin-bottom: 15px;
    }
}/* ================= GLOBAL GRAIPHICS THEME v2 ================= */
:root {
    --g-gold: #FFB800;
    --g-gold-light: #FFE58F;
    --g-platinum: #e5e4e2;
    --g-platinum-light: #ffffff;
    --g-black: #111111;
    --g-gray: #f9f9f9;
    --g-text: #222222;
    --g-border-radius: 20px;
}

.g-section { padding: 80px 20px; position: relative; }
.g-container { max-width: 1200px; margin: 0 auto; }
.g-title { font-size: 36px; font-weight: 800; text-align: center; margin-bottom: 15px; color: var(--g-black); letter-spacing: -1px; }
.g-subtitle { text-align: center; color: #666; font-size: 18px; max-width: 600px; margin: 0 auto 50px; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; font-size: 16px; cursor: pointer; border: none; }
.g-btn-primary { background: linear-gradient(135deg, var(--g-gold), #FFD700); color: #000; box-shadow: 0 5px 20px rgba(255, 184, 0, 0.3); }
.g-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255, 184, 0, 0.5); }

/* --- HERO --- */
.g-hero-section { text-align: center; padding-top: 100px; padding-bottom: 60px; }
.g-hero-card { background: #fff; padding: 60px 40px; border-radius: 30px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 20px 60px rgba(0,0,0,0.05); max-width: 1000px; margin: 0 auto; position: relative; overflow: hidden; }
.g-hero-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:5px; background: linear-gradient(90deg, var(--g-gold), #FFF, var(--g-gold)); }
.g-hero-badge { display: inline-block; background: #FFF8E1; color: #B7791F; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; margin-bottom: 20px; border: 1px solid rgba(183, 121, 31, 0.2); }
.g-hero-title { font-size: 48px; line-height: 1.1; margin-bottom: 20px; }
.text-gold { color: var(--g-gold); }
.g-hero-desc { font-size: 18px; color: #555; max-width: 700px; margin: 0 auto 40px; line-height: 1.6; }
.g-hero-trust { margin-top: 30px; font-size: 14px; color: #888; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* --- PROCESS --- */
.g-process-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: center; text-align: center; }
.g-process-step { padding: 20px; }
.g-step-icon { width: 60px; height: 60px; background: var(--g-black); color: #fff; font-size: 24px; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.g-process-step h4 { font-size: 20px; margin-bottom: 10px; font-weight: 700; }
.g-process-step p { font-size: 15px; color: #666; }
.g-process-connector { height: 2px; background: #eee; flex: 1; min-width: 50px; }

/* --- PORTFOLIO --- */
.g-media-grid { display: grid; gap: 20px; margin-bottom: 20px; }
.g-video-layout { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-photo-layout { grid-template-columns: repeat(4, 1fr); }
.g-media-card { border-radius: 15px; overflow: hidden; background: #000; position: relative; aspect-ratio: 1/1; transition: transform 0.3s ease; }
.g-media-card iframe, .g-media-card img { width: 100%; height: 100%; object-fit: cover; border: none; }
.g-media-card:hover { transform: scale(1.03); z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

/* --- PRICING --- */
.g-card-platinum { 
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%); 
    border-radius: 24px; padding: 50px 40px; text-align: center; 
    position: relative; margin-bottom: 50px; border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), inset 0 0 0 2px rgba(255,255,255,0.8);
    overflow: hidden;
}
.g-card-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%); pointer-events: none; }
.g-platinum-badge { background: var(--g-black); color: #fff; display: inline-block; padding: 8px 20px; border-radius: 20px; font-weight: 800; font-size: 14px; margin-bottom: 15px; letter-spacing: 1px; }
.g-discount-badge { background: #FF3B30; color: #fff; position: absolute; top: 20px; right: 20px; padding: 8px 15px; border-radius: 10px; font-weight: 800; font-size: 14px; box-shadow: 0 5px 15px rgba(255, 59, 48, 0.3); transform: rotate(3deg); }
.g-card-platinum h3 { font-size: 32px; margin-bottom: 10px; color: var(--g-black); }
.g-card-subtext { color: #666; margin-bottom: 30px; }
.g-features-list { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.g-feature { background: rgba(255,255,255,0.6); padding: 8px 15px; border-radius: 10px; font-weight: 500; }
.g-pricing-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 30px; }
.g-price-tag { font-size: 42px; font-weight: 800; color: var(--g-black); }
.g-currency { font-size: 24px; }
.g-starting-from { color: #777; }
.g-btn-platinum { background: var(--g-black); color: #fff; width: 100%; max-width: 300px; padding: 18px; font-size: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.g-btn-platinum:hover { background: #333; transform: translateY(-2px); }
.g-scarcity { margin-top: 15px; font-size: 13px; color: #D0021B; font-weight: 600; }

.g-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; }
.g-pricing-card { background: #fff; border: 1px solid #eee; padding: 30px; border-radius: 20px; position: relative; transition: all 0.3s ease; }
.g-pricing-card:hover { transform: translateY(-5px); border-color: var(--g-gold); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.g-card-badge { position: absolute; top: 15px; right: 15px; font-size: 11px; font-weight: 700; color: #FF3B30; background: #FFF0F0; padding: 4px 8px; border-radius: 5px; }
.g-price-small { font-size: 24px; font-weight: 800; color: var(--g-black); margin: 15px 0; }
.g-btn-outline { border: 2px solid var(--g-gold); color: var(--g-black); background: transparent; width: 100%; }
.g-btn-outline:hover { background: var(--g-gold); }

/* --- REVIEWS MARQUEE --- */
.g-marquee-wrapper { overflow: hidden; width: 100%; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.g-marquee-track { display: flex; gap: 20px; width: max-content; animation: g-scroll 40s linear infinite; }
.g-review-card { background: #fff; padding: 25px; border-radius: 15px; border: 1px solid #f0f0f0; min-width: 300px; max-width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.g-stars { color: #FFB800; margin-bottom: 10px; letter-spacing: 2px; }
.g-review-card p { font-size: 15px; color: #444; line-height: 1.5; margin-bottom: 15px; font-style: italic; }
.g-author { font-weight: 700; font-size: 14px; color: var(--g-black); }
@keyframes g-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- FAQ --- */
.g-faq-container { max-width: 800px; }
.g-faq-item { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.g-faq-question { width: 100%; text-align: left; background: #fff; padding: 20px; border: none; font-size: 18px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #333; transition: all 0.3s; border-radius: 10px; }
.g-faq-question::after { content: '+'; font-size: 24px; color: var(--g-gold); font-weight: 300; }
.g-faq-item.active .g-faq-question { background: #FFFCF0; color: var(--g-black); }
.g-faq-item.active .g-faq-question::after { content: '−'; }
.g-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; color: #555; line-height: 1.6; }
.g-faq-item.active .g-faq-answer { max-height: 200px; padding-bottom: 20px; }

/* --- STICKY CTA --- */
.g-sticky-cta { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(17, 17, 17, 0.9); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 50px; z-index: 999; display: flex; gap: 15px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); width: 90%; max-width: 450px; justify-content: space-between; }
.g-sticky-content span { color: #fff; font-size: 14px; font-weight: 600; }
.g-btn-sm { padding: 8px 20px; font-size: 14px; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .g-hero-title { font-size: 32px; }
    .g-process-grid { grid-template-columns: 1fr; }
    .g-process-connector { display: none; }
    .g-photo-layout { grid-template-columns: repeat(2, 1fr); }
    .g-card-platinum { padding: 30px 20px; }
    .g-features-list { flex-direction: column; align-items: center; gap: 10px; }
    .g-sticky-cta { bottom: 10px; flex-direction: column; padding: 15px; border-radius: 15px; gap: 10px; text-align: center; }
}/* ================= GLOBAL STYLES ================= */
:root {
    --gold: #FFB800;
    --gold-light: #FFE58F;
    --black: #111111;
    --gray-light: #F9F9F9;
    --border-color: #E5E5E5;
    --radius: 20px;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Bölüm Temelleri */
.g-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.g-section-header { text-align: center; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; }
.g-title { font-size: 36px; font-weight: 800; color: var(--black); margin-bottom: 15px; letter-spacing: -0.5px; }
.g-subtitle { font-size: 18px; color: #666; font-weight: 400; }

/* ================= HERO SECTION ================= */
.g-hero-section {
    position: relative; padding: 100px 20px; text-align: center; overflow: hidden;
    background: radial-gradient(circle at 50% 0%, #FFFBEB 0%, #ffffff 70%);
}
.g-hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.g-badge-pill {
    display: inline-block; background: #fff; border: 1px solid #EAD4AA; color: #B48400;
    padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.15);
}
.g-hero-title { font-size: 56px; line-height: 1.1; font-weight: 900; margin-bottom: 20px; color: var(--black); }
.g-text-gold { color: var(--gold); background: linear-gradient(45deg, #FFB800, #F7971E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.g-hero-sub { font-size: 20px; color: #555; line-height: 1.6; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }

/* Butonlar */
.g-btn-primary {
    background: linear-gradient(135deg, #FFB800, #FFC837); color: #000 !important;
    padding: 16px 36px; border-radius: 50px; font-weight: 700; font-size: 18px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
    transition: var(--transition); border: none; cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 184, 0, 0.3);
}
.g-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 184, 0, 0.45); }
.g-btn-outline {
    background: transparent; border: 1px solid var(--black); color: var(--black) !important;
    padding: 12px 24px; border-radius: 50px; font-weight: 600; text-decoration: none;
    display: inline-block; transition: var(--transition); font-size: 14px;
}
.g-btn-outline:hover { background: var(--black); color: #fff !important; }

.g-trust-badges { margin-top: 30px; display: flex; justify-content: center; gap: 20px; font-size: 14px; color: #777; flex-wrap: wrap; }

/* ================= NASIL ÇALIŞIR (PROCESS) ================= */
.g-process-grid { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
.g-process-step { flex: 1; text-align: center; padding: 20px; }
.g-step-icon {
    width: 60px; height: 60px; background: #FFF9E5; color: var(--gold);
    font-size: 24px; font-weight: 800; border-radius: 20px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; border: 1px solid rgba(255, 184, 0, 0.2);
}
.g-process-arrow { font-size: 30px; color: #ddd; padding-top: 15px; display: block; }
.g-process-step h4 { font-size: 20px; margin-bottom: 10px; }
.g-process-step p { font-size: 15px; color: #666; }

/* ================= MEDIA GRID (Bento) ================= */
.g-media-grid { display: grid; gap: 20px; width: 100%; }
.g-video-layout { grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.g-photo-layout { grid-template-columns: repeat(4, 1fr); }

.g-media-item {
    border-radius: var(--radius); overflow: hidden; position: relative;
    box-shadow: var(--shadow); transition: var(--transition); aspect-ratio: 1/1;
    background: #f0f0f0;
}
.g-media-item img, .g-media-item iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: none; }
.g-media-item:hover { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.g-video-item { aspect-ratio: 16/9; } /* Video için özel oran */

/* ================= PACKAGES (PREMIUM CARDS) ================= */
.g-packages-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px; margin-top: 40px;
}

/* Standart Kart */
.g-package-card {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 35px 25px; text-align: center; transition: var(--transition); position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    height: 100%;
}
.g-package-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }

.g-card-icon { font-size: 40px; margin-bottom: 20px; }
.g-package-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--black); }
.g-package-card p { font-size: 15px; color: #666; margin-bottom: 20px; line-height: 1.5; }
.g-price-simple { font-size: 22px; font-weight: 800; color: var(--black); margin-bottom: 25px; }
.g-price-simple small { font-size: 14px; font-weight: 400; color: #888; display: block; margin-top: 5px; }

/* PLATINUM KART (Ultra Premium) */
.g-card-platinum-wrapper { margin-bottom: 50px; position: relative; padding: 5px; }
.g-card-platinum {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border: 1px solid #dce0f5; position: relative; overflow: hidden;
    display: flex; text-align: left; padding: 0; border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 50, 150, 0.08); align-items: stretch;
}
.g-platinum-content { display: grid; grid-template-columns: 1.5fr 1fr; width: 100%; }
.g-plat-info { padding: 50px; }
.g-plat-action {
    background: linear-gradient(135deg, #F5F7FA, #fff); border-left: 1px solid #eee;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px;
}

.g-badge-best {
    position: absolute; top: 20px; left: 20px; background: var(--black); color: #fff;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.g-badge-discount {
    position: absolute; top: 20px; right: 20px; background: #FFE5E5; color: #D00;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 800;
}

.g-card-platinum h3 { font-size: 32px; font-weight: 900; margin-bottom: 15px; background: linear-gradient(90deg, #333, #000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.g-plat-desc { font-size: 18px; color: #555; margin-bottom: 30px; max-width: 90%; }
.g-plat-features { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.g-plat-features li { font-size: 15px; color: #333; display: flex; align-items: center; gap: 8px; font-weight: 500; }

.g-price-tag { text-align: center; margin-bottom: 20px; }
.g-price-old { display: block; text-decoration: line-through; color: #999; font-size: 18px; }
.g-price-current { display: block; font-size: 36px; font-weight: 900; color: var(--black); line-height: 1; margin: 5px 0; }
.g-viewers { font-size: 12px; color: #D00; margin-top: 10px; font-weight: 600; animation: pulse 2s infinite; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

/* ================= REVIEWS (Infinite Loop) ================= */
.g-reviews-section { background: #FAFAFA; overflow: hidden; }
.g-marquee-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.g-marquee-container::before, .g-marquee-container::after {
    content: ""; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none;
}
.g-marquee-container::before { left: 0; background: linear-gradient(to right, #FAFAFA, transparent); }
.g-marquee-container::after { right: 0; background: linear-gradient(to left, #FAFAFA, transparent); }

.g-marquee-track { display: inline-block; animation: scroll 40s linear infinite; }
.g-review-card {
    display: inline-block; width: 320px; background: #fff; margin: 0 15px;
    padding: 25px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #eee; vertical-align: top; white-space: normal;
}
.g-stars { color: #FFB800; margin-bottom: 10px; font-size: 14px; }
.g-review-card p { font-size: 15px; color: #444; line-height: 1.5; margin-bottom: 15px; font-style: italic; }
.g-user { font-weight: 700; font-size: 14px; color: var(--black); display: flex; flex-direction: column; }
.g-user span { font-weight: 400; color: #888; font-size: 12px; }

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ================= FAQ (Accordion) ================= */
.g-faq-container { max-width: 800px; margin: 0 auto; }
.g-faq-item { margin-bottom: 15px; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; transition: var(--transition); }
.g-faq-item.active { border-color: var(--gold); box-shadow: 0 5px 15px rgba(255, 184, 0, 0.1); }

.g-faq-question {
    width: 100%; text-align: left; padding: 20px; background: #fff; border: none;
    font-size: 17px; font-weight: 600; color: var(--black); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; outline: none;
}
.g-faq-item.active .g-faq-question { color: #B48400; background: #FFFBEB; }

.g-faq-icon { font-size: 24px; font-weight: 300; transition: var(--transition); }
.g-faq-item.active .g-faq-icon { transform: rotate(45deg); }

.g-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.g-faq-answer p { padding: 0 20px 20px; color: #555; line-height: 1.6; font-size: 15px; margin: 0; }

/* ================= STICKY CTA ================= */
.g-sticky-cta {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(17, 17, 17, 0.9); backdrop-filter: blur(10px);
    padding: 12px 24px; border-radius: 50px; display: flex; align-items: center; gap: 20px;
    z-index: 999; box-shadow: 0 10px 30px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    width: 90%; max-width: 500px; justify-content: space-between;
}
.g-sticky-text { color: #fff; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.g-sticky-badge { background: #D00; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.g-btn-small { padding: 8px 20px; font-size: 14px; }

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
    .g-hero-title { font-size: 36px; }
    .g-hero-section { padding: 60px 20px; }
    .g-process-arrow { transform: rotate(90deg); padding: 10px 0; }
    .g-process-grid, .g-media-grid, .g-packages-grid { grid-template-columns: 1fr; }
    .g-platinum-content { grid-template-columns: 1fr; }
    .g-plat-info, .g-plat-action { padding: 30px; }
    .g-plat-features { grid-template-columns: 1fr; }
    .g-media-item { aspect-ratio: auto; }
    .g-sticky-cta { flex-direction: column; gap: 10px; padding: 15px; border-radius: 12px; bottom: 10px; text-align: center; width: 95%; }
    .g-sticky-text { flex-direction: column; gap: 5px; }
}
/* ================= GRAIPHICS POLICY TASARIMI ================= */

/* 1. Arka Plan ve Genel Düzen */
.shopify-policy__container {
  max-width: 900px !important; /* Okumayı kolaylaştırmak için daralt */
  margin: 60px auto !important;
  padding: 0 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. Beyaz Kart Görünümü */
.shopify-policy__body {
  background: #ffffff;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Hafif gölge */
  border: 1px solid #f0f0f0;
}

/* 3. Ana Başlık (Gizlilik Politikası vb.) */
.shopify-policy__title h1 {
  text-align: center !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #111111 !important; /* Senin siyahın */
  margin-bottom: 40px !important;
  text-transform: uppercase;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Başlığın altına Gold çizgi ekleyelim */
.shopify-policy__title h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #FFB800; /* Senin Gold rengin */
  margin: 15px auto 0 auto;
  border-radius: 4px;
}

/* 4. Alt Başlıklar (H2, H3) */
.shopify-policy__body h2, 
.shopify-policy__body h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid #FFB800; /* Sol tarafa gold çizgi */
  padding-left: 15px;
}

/* 5. Paragraf Metinleri */
.shopify-policy__body p {
  font-size: 16px;
  line-height: 1.8; /* Okumayı rahatlatır */
  color: #555555;
  margin-bottom: 20px;
}

/* 6. Linkler */
/* 6. Linkler - GÜNCELLENMİŞ (Kontrast Versiyon) */
.shopify-policy__body a {
  color: #000000 !important;       /* Yazı kesinlikle SİYAH */
  font-weight: 700;                 /* Biraz kalın olsun */
  text-decoration: none !important; /* Standart çizgiyi kaldır */
  border-bottom: 2px solid #FFB800; /* Bizim özel kalın gold çizgimiz */
  padding-bottom: 1px;              /* Çizgi ile yazı arasına nefes payı */
  transition: all 0.3s ease;        /* Yumuşak geçiş */
}

.shopify-policy__body a:hover {
  background: #000000 !important;   /* Arka plan SİYAH olsun */
  color: #FFB800 !important;        /* Yazı GOLD olsun */
  border-bottom-color: #000000;     /* Alt çizgiyi gizle (arka planla aynı yap) */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Hafif bir derinlik kat */
  padding: 4px 8px;                 /* Buton gibi görünmesi için iç boşluk */
  border-radius: 4px;               /* Köşeleri yumuşat */
  margin: -4px -8px;                /* Padding eklediğimiz için satırın kaymasını engelle */
}

/* 7. Mobil Uyumluluk */
@media (max-width: 768px) {
  .shopify-policy__container {
    margin: 30px auto !important;
  }
  .shopify-policy__body {
    padding: 25px; /* Mobilde boşluğu azalt */
  }
  .shopify-policy__title h1 {
    font-size: 28px !important;
  }
}