/*
Theme Name:  Simply Amelie
Theme URI:   https://simplyamelie.com
Description: Standalone theme untuk toko Simply Amelie — Artisan Fashion.
Author:      Simply Amelie
Version:     1.0.0
Text Domain: simplyamelie
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
============================================================ */
:root {
  --sa-cream:       #F4EFEA;
  --sa-white:       #FFFDF9;
  --sa-brown:       #8B6B5C;
  --sa-brown-dark:  #6B4E41;
  --sa-olive:       #7A8A6B;
  --sa-terracotta:  #C46A4A;
  --sa-tosca:       #6FC2C9;
  --sa-text:        #3D2B1F;
  --sa-muted:       #9C8478;
  --sa-border:      #E2D9D3;

  --sa-font-serif: 'Playfair Display', Georgia, serif;
  --sa-font-sans:  'Montserrat', sans-serif;
}

/* ============================================================
   BASE RESET
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sa-font-sans);
  background-color: var(--sa-cream);
  color: var(--sa-text);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: var(--sa-font-sans);
}

ul {
  list-style: none;
}

/* ============================================================
   LAYOUT WRAPPER
============================================================ */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Konten utama (semua template kecuali front-page) mengisi sisa tinggi halaman */
.sa-primary-content,
.sa-wc-primary {
  flex: 1;
}

.sa-primary-content {
  width: 100%;
  padding: 3em 5em 6em;
}

/* WooCommerce pages: pakai padding penuh tanpa max-width constraint */
.sa-wc-primary {
  padding: 3em 5em 6em;
}

.sa-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* WooCommerce main tidak perlu max-width — biarkan WC yang handle layout grid */
.sa-wc-primary .sa-main {
  max-width: 100%;
}

/* ============================================================
   WORDPRESS CORE — screen reader, alignment helpers
============================================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.alignleft  { float: left;  margin-right: 1.5em; }
.alignright { float: right; margin-left:  1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: 1200px; }
.alignfull  { max-width: 100%; }

/* WooCommerce notices */
.woocommerce-notices-wrapper { padding: 0 56px; }

@media (max-width: 768px) {
  .sa-primary-content { padding: 32px 20px 56px; }
  .woocommerce-notices-wrapper { padding: 0 20px; }
}


/* ======================================================
CUSTOM WooCommerce Simply Amelie
========================================================= */

.woocommerce-breadcrumb{
  margin-bottom: 2em!important;
}

.woocommerce-product-gallery__image{
  border-radius: 10px!important;
}

.flex-control-thumbs{
  margin-top: 1em!important;
}
.flex-control-thumbs li{
  margin-right: 1em!important;
}
.flex-control-thumbs li img{
  border-radius: 5px;
}