/* Adapted from startbootstrap-resume's .resume-section: roomy, centered, one-idea-at-a-time
   sections separated by a plain divider — applied to each shop page-section block on a shop's
   home page. Skips the template's forced min-height:100vh, which reads fine for a resume's fixed
   handful of static sections but would leave awkward empty space under a short Banner/About block
   while a long ProductGrid blows past it anyway. */
.storefront-section {
  padding: 3rem 1rem;
}

@media (min-width: 768px) {
  .storefront-section {
    padding: 4rem 2rem;
  }
}

.storefront-section-content {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
}

.storefront-subheading {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--shop-accent);
}
/* Product page gallery (Storefront/Product): a Bootstrap carousel over every photo/video plus a
   clickable thumbnail strip. Slides share one aspect ratio so mixed portrait/landscape shots don't
   make the page jump, and photos are letterboxed (contain) rather than cropped. */
.product-gallery .carousel-item {
  aspect-ratio: 4 / 5;
  background-color: var(--shop-surface);
}

.product-gallery .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Photos open full size on click; with a mouse they also magnify under the cursor (product-gallery-zoom.js). */
.product-gallery .carousel-item {
  overflow: hidden;
}

.product-gallery .gallery-photo {
  cursor: zoom-in;
}

.product-gallery .gallery-photo:focus-visible {
  outline: 3px solid var(--shop-accent);
  outline-offset: -3px;
}

/* Full-screen photo viewer. Fitted to the screen until the photo is clicked, then actual size and
   pannable by scrolling or dragging. */
.photo-viewer {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.92);
}

.photo-viewer::backdrop {
  background: rgba(0, 0, 0, 0.92);
}

.photo-viewer-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-viewer-stage.is-actual-size {
  display: block;
  overflow: auto;
  cursor: grab;
}

.photo-viewer-stage.is-actual-size .photo-viewer-img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.photo-viewer-close,
.photo-viewer-prev,
.photo-viewer-next {
  position: absolute;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.photo-viewer-close {
  top: 1rem;
  right: 1rem;
}

.photo-viewer-prev,
.photo-viewer-next {
  top: 50%;
  transform: translateY(-50%);
}

.photo-viewer-prev {
  left: 1rem;
}

.photo-viewer-next {
  right: 1rem;
}

.photo-viewer-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.product-gallery .gallery-video {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #000;
}

/* The default controls are white arrows on a transparent strip — invisible on a light photo. */
.product-gallery .carousel-control-prev,
.product-gallery .carousel-control-next {
  width: 12%;
  opacity: 0.85; /* Bootstrap's 0.5 makes the controls vanish over busy or dark photos */
}

.product-gallery .carousel-control-prev-icon,
.product-gallery .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  background-size: 55%;
  /* The white ring keeps the dark circle visible on a dark photo too. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.product-gallery .gallery-counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  pointer-events: none;
}

.gallery-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  background: none;
  overflow: hidden;
  opacity: 0.65;
}

.gallery-thumb.active,
.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  opacity: 1;
  border-color: var(--shop-accent);
}

.gallery-thumb img,
.gallery-thumb .gallery-thumb-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.gallery-thumb .gallery-thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  color: #fff;
  font-size: 1.25rem;
}

/* ---- Cart hold countdown ---- */
.cart-hold-clock {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cart-hold-timer {
    background: #fff3cd;
    color: #664d03;
    font-variant-numeric: tabular-nums;
}

.cart-hold-timer.hold-urgent,
.cart-hold-notice.hold-urgent .cart-hold-clock,
.cart-hold-row-timer.hold-urgent {
    color: #b02a37;
}

.cart-hold-timer.hold-urgent {
    background: #f8d7da;
}

.cart-hold-row-timer.hold-urgent {
    color: #b02a37 !important; /* beats .text-muted's !important */
}

/* ==== Shop themes ====
   The shop's colors, fonts and radii arrive as CSS variables (see StorefrontTheme.CssVariables);
   the classes on <body> pick the header, card and corner styles. */

body {
    background-color: var(--shop-bg);
    color: var(--shop-text);
    font-family: var(--shop-body-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
    font-family: var(--shop-heading-font);
    letter-spacing: -0.01em;
}

/* Buttons in the brand color, with a label color picked for contrast. */
.btn {
    --bs-btn-border-radius: var(--shop-button-radius);
    --bs-btn-border-radius-sm: var(--shop-button-radius);
    --bs-btn-border-radius-lg: var(--shop-button-radius);
}

.btn-primary {
    --bs-btn-color: var(--shop-on-primary);
    --bs-btn-bg: var(--shop-primary);
    --bs-btn-border-color: var(--shop-primary);
    --bs-btn-hover-color: var(--shop-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--shop-primary) 86%, var(--shop-on-primary));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--shop-primary) 86%, var(--shop-on-primary));
    --bs-btn-active-color: var(--shop-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--shop-primary) 78%, var(--shop-on-primary));
    --bs-btn-active-border-color: color-mix(in srgb, var(--shop-primary) 78%, var(--shop-on-primary));
    --bs-btn-disabled-color: var(--shop-on-primary);
    --bs-btn-disabled-bg: var(--shop-primary);
    --bs-btn-disabled-border-color: var(--shop-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-link-color-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--shop-primary);
    --bs-btn-border-color: var(--shop-primary);
    --bs-btn-hover-color: var(--shop-on-primary);
    --bs-btn-hover-bg: var(--shop-primary);
    --bs-btn-hover-border-color: var(--shop-primary);
    --bs-btn-active-color: var(--shop-on-primary);
    --bs-btn-active-bg: var(--shop-primary);
}

.card {
    --bs-card-bg: var(--shop-surface);
    --bs-card-border-color: var(--bs-border-color);
}

.form-control, .form-select {
    --bs-border-radius: min(var(--shop-radius), .75rem);
}

/* ---- Header styles ---- */
.shop-header {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.shop-header-bold .shop-header {
    background-color: var(--shop-primary);
}

.shop-header-clean .shop-header,
.shop-header-centered .shop-header {
    background-color: var(--shop-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.shop-header-centered .shop-header .navbar-nav .nav-link {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
}

/* ---- Product card styles ---- */
.product-tile {
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-tile .product-tile-image {
    overflow: hidden;
}

.product-tile .product-tile-image img {
    transition: transform .35s ease;
}

.product-tile:hover .product-tile-image img {
    transform: scale(1.03);
}

.shop-cards-card .product-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .1) !important;
}

/* Minimal: no card at all — the photo, then the name and price, like work on a gallery wall. */
.shop-cards-minimal .product-tile {
    --bs-card-bg: transparent;
    border: 0;
    box-shadow: none !important;
}

.shop-cards-minimal .product-tile .product-tile-image {
    border-radius: var(--shop-radius);
}

.shop-cards-minimal .product-tile .card-body {
    padding: .75rem 0 0;
}

/* Framed: a thin outline with room around the photo, like a mat in a frame. */
.shop-cards-framed .product-tile {
    box-shadow: none !important;
    padding: .75rem;
}

.shop-cards-framed .product-tile .product-tile-image {
    border-radius: calc(var(--shop-radius) / 2);
}

.shop-cards-framed .product-tile .card-body {
    padding: .75rem .25rem .25rem;
    text-align: center;
}

.shop-cards-minimal .product-tile .card-img-top,
.shop-cards-framed .product-tile .card-img-top {
    border-radius: 0;
}

/* ---- Banner styles ---- */
.shop-banner-color {
    background-color: var(--shop-primary);
    color: var(--shop-on-primary);
    border-radius: var(--shop-radius);
}

.shop-hero {
    position: relative;
    min-height: clamp(280px, 45vw, 520px);
    border-radius: var(--shop-radius);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    color: #fff;
}

.shop-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the bottom of the photo so the white title reads on any image. */
.shop-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .05) 60%);
}

.shop-hero-content {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.shop-banner-split-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--shop-radius);
}

/* Side by side with no photo yet: the shop's initial, large, on its brand color. */
.shop-banner-split-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--shop-on-primary) 14%, transparent), transparent 55%),
        radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--shop-accent) 45%, transparent), transparent 60%),
        var(--shop-primary);
    color: var(--shop-on-primary);
    font-family: var(--shop-heading-font);
    font-size: clamp(5rem, 14vw, 10rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/* Instagram's embed script gives each post a 326px minimum width (inline), which overflows narrow
   grid columns and gives the whole page a sideways scrollbar. Keep embeds inside their column. */
.instagram-media {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* While a post loads, the embed is absolutely positioned at 100% width; the column must contain it. */
.instagram-col {
    min-height: 3rem;
    overflow: hidden;
}

/* Bootstrap's "light" utilities are a fixed near-white, even in dark mode. On a dark shop, use the
   theme's panel color instead so placeholders, letterboxing and tags don't glare. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--shop-surface) !important;
}

[data-bs-theme="dark"] .text-bg-light {
    color: var(--shop-text) !important;
    background-color: var(--shop-surface) !important;
}